一个全面详细的gulp工作流

开发dev

gulp-load-plugins
使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块，而不用一个一个地去加载。

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    $= gulpLoadPlugins();

gulp.task('js', function () {
    
   return gulp.src('js/*.js')
      .pipe($.jshint())
      .pipe($.jshint.reporter('default'))
      .pipe($.uglify())
      .pipe($.concat('app.js'))
      .pipe(gulp.dest('build'));
});

一般在gulpfile的开头我们都通过gulp-load-plugins来将所有的gulp模块加载进来。
然后我们就要定义各个gulp任务了。

gulp.task('default', function(cb) {
   
    $.runSequence('dev:local', 'dev:connect', 'dev:watch', cb);
});

run-sequence
gulp里的task都是异步并发执行的，有的时候我们需要一连串的task按顺序执行，这时就需要run-sequence。

runSequence('task1', 'task2', ['task3', 'task4'], 'task5')
task1完成后才会执行task2，以此类推。
注意到task3和task4被放在中括号里了，这表明，task3和task4可以并发执行的，但两个都执行完后才会执行task5。

这里要说明的是，每个task要么返回一个stream，即return gulp.src().pipe().pipe()，要么支持回调函数，即gulp.task(‘task1’, function (done) { action1(done); })，满足了这两点才能保证正常的执行顺序，因为这是gulp对异步task的基本要求。

这里我们通过定义default任务来定义gulp命令发出时顺序执行的任务。

一般在开发阶段我们需要依次完成以下几个工作：

• 一些编译工作，可以同步进行
  
  • less/sass编译
  • 模版预编译
• 开启本地开发server
• 监听文件变化

下面来详细地记录一下。

less/sass编译

首先要将less/sass源文件编译成css文件，这样页面才可以使用。

gulp.task('dev:less',function(){
   
    return gulp.src('/less/*.less')
        .pipe($.plumber())
        .pipe($.less())
        .pipe($.connect.reload())
        .pipe(gulp.dest('/styles'))
})

gulp-plumber
防止由gulp插件错误导致的pipe break，一般用在流的最开始处。
可以传入函数来处理错误

gulp-less
将less文件编译成css文件

gulp-connet
启动一个webserver，在后面详细说明。这里使用就是在每次less编译完毕后都刷新浏览器

最后我们将编译好的css文件放入目标文件夹中，页面就可以引用了。

模版预编译

有时我们会使用一些模版，他们需要被编译之后才能在页面中显示。
这里就要根据使用的不同的模版来选择相应的gulp编译插件来使用。

开启本地开发server

gulp-connect不仅能够自动启动一个web服务器，还可以监听文件的改动自动刷新浏览器，解放F5。

最简单的启动一个web服务器：

gulp.task('webserver',function(){
   
    $.connect.server();
})

没有做任何配置，那么就是在localhost:8080可以看到gulpfile.js同级目录下的index.html。

为了浏览器自动刷新，我们要配置livereload，一般是下面两个步骤：

• 在启动服务器的时候运行livereload：

gulp.task('webserver',function()<