Gulp的自动化编译PostCss

Gulp能够自动执行task定义的事务，但是我们每次调用一次事务，事务也就执行一次，这样我们每次都必须手动去执行一次，就显得很繁琐。
以移动app开发为例，我们在编写app的css时，诸如px的转化问题就很头疼，好在有好用的插件可以完成转化。我们可以通过postcss支持的插件来帮助我们简化工作
首先需要在工程中安装

gulp  install gulp-load-plugins --save-dev

然后我们就能在gulpfile.js文件中使用它，gulp-load-plugins中有许多有用的插件

var plugins = require('gulp-load-plugins')();
var postcss = plugins.postcss;
var sourcemaps = plugins.sourcemaps;
var gulp = require('gulp');

gulp.task("postcss",function(){
    var setting = {
        rootValue: 100,
        propList: ['*'],
	};
    gulp.src("css/*.css",{base:"./static"})//base可以定义开始文件的路径
   .pipe(plugins.rename({ suffix: '.cmp' }))  //生成新文件的前缀
   .pipe(sourcemaps.init()) //解决编译后文件后编译前文件的映射关系，
   //方便调试的时候定位到源代码的出错位置，这里是标记 map 记录始发点
   .pipe(postcss([ autoprefixer(), pxtorem(setting)]))//postcss接收一个数组参数，
   //数组中需要使用的编译插件，
   //第一个插件是处理浏览器私有前缀的，后者是px向rem的转化，
   .pipe(sourcemaps.write('.'))//输出.map文件
   .pipe(gulp.dest(config.source));//输出编译后的css,文件路径是base+dest
})

现在我们已经定义好了一个可以进行编译任务的task, 只要gulp task就能执行，但是这样每次修改css，都必须重新编译，所以最好能够gulp自己监听到改变就自动调用postcss任务，好在gulp提供了gulp-watch和gulp-batch插件来完成这一功能，当然直接使用gulp-load-plugins中的watch插件更加简单

'use strict';

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var postcss = plugins.postcss;
var sourcemaps = plugins.sourcemaps;
// var watch = plugins.watch;
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var pxtorem = require('postcss-pxtorem');
var autoprefixer = require('autoprefixer');
   gulp.task('watchcss',function(){
  var setting = {
        rootValue: 100,
        propList: ['*'],
	};
  watch(list,batch(function (events, done) {
           gulp.start('postcss', done)
         }));

});
gulp.task('postcss', function () {
     gulp.src(list)
        .pipe(plugins.rename({ suffix: '.cmp' }))
        .pipe(sourcemaps.init())
        .pipe(postcss([ autoprefixer(), pxtorem(setting)]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.source+"/css"));
});

或者

ulp.task('postcss', function () {
	var setting = {
        rootValue: 100,
        propList: ['*'],
	};

	//var list = config.taskResource.cssFiles.filter(function (val) {
		//return val.indexOf('.min') === -1      //判断是否被压缩过
    //});
    return watch(list, options)
		.pipe(plugins.rename({ suffix: '.cmp' }))
        .pipe(sourcemaps.init())
        .pipe(postcss([ autoprefixer(), pxtorem(setting)]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.source));
});

这样修改css文件后就能自动编译，但是修改代码总是出一些bug，这时候编译器可能就会出错，这时候就会自动退出编译，这对我们来说是很难受的，因为你并不知道什么时候出错，这个功能就停止了，所以我们在编译出错后仍能继续重新编译。
我们有几种方法，第一种处理编译出错的情况继续编译，只要添加on函数监听错误，然后处理就行

gulp.task('less', function() {  
  return  gulp.src(list)
        .pipe(plugins.rename({ suffix: '.cmp' }))
        .pipe(sourcemaps.init())
        .pipe(postcss([ autoprefixer(), pxtorem(setting)]))
        .on('error', function(err){
           console.log(err.message);
           //gutil.log('Less Error!', err.message);  
           //使用 gulp-util 只是使错误日志格式与 gulp 的日志保持一致
            this.emit('end');
         })
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.source+"/css"));
});

此时后面就能继续pipe()
当然这种方法很是麻烦，需要在每个可能编译出错的地方都添加这个监听，所以可以使用gulp-plumber。gulp-plumber 可以阻止 gulp 插件发生错误导致进程退出并输出错误日志。

gulp.task('less', function() {  
  return  gulp.src(list)
        .pipe(plumber())
        .pipe(plugins.rename({ suffix: '.cmp' }))
        .pipe(sourcemaps.init())
        .pipe(postcss([ autoprefixer(), pxtorem(setting)]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.source+"/css"));
});

这样只要在开头添加就行了，到这里Gulp的自动化编译就完成了