gulp速成

前端自动化帮助我们像工厂一样生产和管理自己的项目代码，记录gulp快速使用的笔记如下。

入门指南

1.首先gulp运行需要nodeJS环境，如果还未安装好node，可以前往官网下载，这里不再赘述安装过程。确认安装成功后，我们打开终端，先全局安装gulp。

1	$ npm install gulp --global

2.接着cd到新建文件夹中，执行以下语句来局部安装gulp。（若项目还未初始化，记得先执行 npm init）

1	$ npm install gulp --save-dev

3.在项目test的根目录下创建一个名为 gulpfile.js 的文件（注意这里的命名只能是gulpfile.js）

// gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {
	// 默认的任务代码
})

4.运行 gulp：

$ gulp

默认的名为 default 的任务（task）就被运行了，在这里，这个任务并未做任何事情。

若要单独执行特定的任务（task），请输入 gulp + 任务名。

常见的gulp自动化使用

日常的前端开发项目的过程中，我们可能会希望gulp为我们做这三件事情：
a. 编写less文件时，gulp可以自动帮我们把这些less转成css文件（要是顺便再压缩一下就更好了）。
b. 编写js文件时，gulp将js文件丑化一下，（前端的js文件可以被客户直接查看到，不丑化就很容易被攻击）。丑化的同时也是压缩。
c. 在编写以上less和js的时候，它能够实时监测到文件的变化，同时每次都自动触发上面两个任务的重新执行。

现在我们开始使用gulp。先安装几个将要调用到的模块

$ npm install gulp-less --save-dev
$ npm install gulp-livereload --save-dev
$ npm install gulp-minify-css --save-dev
$ npm install gulp-autoprefixer --save-dev
$ npm install gulp-concat --save-dev
$ npm install gulp-rename --save-dev
$ npm install gulp-uglify --save-dev

或者直接全部安装:

1	$ npm install gulp-less gulp-livereload gulp-minify-css gulp-autoprefixer gulp-concat gulp-rename gulp-uglify --save-dev

我们的测试项目名为test，其文件目录大致如下：

- view
  - index.html
  - my.html
  - **

- src
  - less
  - js

- dist
  - css
  - js

- gulpfile.js
- package.json

我们希望 gulp 会监测 src 里面的 less 和 js 文件，当这些文件改变时，它会自动编译它们并生成到 dist 文件夹中。初步思路是这样，接下来我们开始修改gulpfile.js文件

var gulp = require('gulp');		// 引入gulp

var less = require('gulp-less'),			         // 引入 <less编译> 模块
    livereload = require('gulp-livereload'),        // 引入 <livereload> 模块可以自动刷新浏览器
    autoprefixer = require('gulp-autoprefixer'),    //css3前缀自动补全
    minifycss = require('gulp-minify-css'),	        // 引入 <css压缩> 模块
    concat = require('gulp-concat'),		      // 文件合并
    rename = require('gulp-rename'),		  // 文件更名
    uglify = require('gulp-uglify');		// js丑化

开始写新任务

// 这里我们写一个名为 style 的任务
gulp.task('style', function() {
    return gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css'));
});

这是 gulp 的管道语法，回调函数中直接 return，return 后面则是链式调用 gulp。先指定入口文件夹为根目录下的 src/less/ 下所有的 less 文件（*.less代表选中所有后缀为.less的文件）。
接着 pipe()函数中写执行的动作，依次是
less() （编将ess文件编译为css）、
autoprefixer() （自动补全css3前缀）、
rename() （将新生成的css重命名，添加后缀.min）、
minifycss() （压缩css）
最后输出到 dist/css文件夹中，完成。

现在来测试下这个任务能不能顺利执行。我们在 src/less 文件夹中新建一个 index.less 文件，用基础的 less 语法编写，如下：

.container {
  p {
    font-size: 18px;
  }
}

然后打开终端，cd 到项目 test 的根目录中，执行 ‘style’ 任务

1	$ gulp style

如果顺利完成，可以看到 windows 的系统提示，此时我们打开 dist/css 文件夹，可以看到里面多了 index.min.css，这是刚刚编译生成出来的 css 文件。
迈出了第一步，接下来的就简单了。我们再为 gulpfile.js 文件新增一个名为 js 的任务

// js
gulp.task('js', function() {
    return gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/js'));
});

最后再新增一个可以监测 js 和 less 文件变化的任务

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('src/less/*.less', ['style']);
    gulp.watch('src/js/*.js', ['js']);
    gulp.watch('dist/css/*.*',function(file){
        livereload.changed(file.path);
    })
});

到了这里，只要你在终端输入

1	$ gulp watch

它就会启动一个监测js和less文件变化的进程，一旦这些文件变化，它就会触发 style 任务和 js 任务，如果还想顺便让浏览器自己刷新一下，则还需要为浏览器添加 livereload 插件并开启。如需关闭该任务，只需在终端按ctrl+C 即可停止。

gulp基本任务到这里就结束了，开始去体验gulp吧，祝你好运~