gulp--自动化构建工具学习笔记

    gulp–基于流的自动化构建工具，可以很方便的压缩JS，CSS文件，压缩image图片，从而提高我们的网站访问性能，同时也能够实现js或css文件的合并。下面是它官网给的优势：
    1.易于使用
    通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
    2.构建快速
    利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
    3.插件高质
    Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
    4.易于学习
    通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
下面是配置和使用步骤，开始使用gulp自动化构建工具,它依赖nodejs
    1.安装配置gulp，放一张官网的入门指南图片，有相应的命令操作。

更过的配置和使用操作可到gulp官网上查看http://www.gulpjs.com.cn/

记录如何使用gulp构建一个项目

    1.首先需要一个配置文件，对于基于express的nodejs工程，它在主目录下有package.json文件，如果是其他工程文件可使用npm init这个命令创建package.json。
    2.对于创建的新项目，安装 gulp 到项目（防止全局 gulp 升级后与此项目 gulpfile.js 代码不兼容）

npm install gulp --save-dev

    3.安装项目依赖插件

npm install gulp-uglify gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-minify-css gulp-autoprefixer gulp-less gulp-ruby-sass gulp-imagemin gulp-util --save-dev

    4.新建gulpfile.js配置文件，下面是我总结归纳的关于压缩js,css,image的任务，能够实现压缩全部或单个文件，实时监测单个文件的变化，js文件有错误时能够输出错误信息。代码中我做了详细的解释。

var gulp=require('gulp');
var gutil=require('gulp-util');//实现命令行输出带时间和颜色
var uglify=require('gulp-uglify');//压缩js
var watchPath=require('gulp-watch-path');//实时检查路径插件
var minifyCSS=require('gulp-minify-css');//压缩css插件
var rename=require('gulp-rename');//重命名插件
var imagemin=require('gulp-imagemin');//压缩image插件
var combiner = require('stream-combiner2');//捕获错误信息插件
var sourcemaps = require('gulp-sourcemaps');//map文件，方便chroe调试
var autoprefixer = require('gulp-autoprefixer');//解析css文件并且添加浏览器前缀到css规则

//捕获错误
var handleError = function (err) {
    // console.log(err);
    var colors = gutil.colors;
    console.log('\n');
    gutil.log(colors.red('Error!'));
    gutil.log('fileName: ' + colors.red(err.fileName));
    gutil.log('lineNumber: ' + colors.red(err.cause.line));
    gutil.log('message: ' + err.cause.message);
    gutil.log('plugin: ' + colors.yellow(err.plugin));
}
//实时观察js变化，检测到某个js文件被修改时，只编写当前修改的文件
//压缩单个js文件
gulp.task('watchjs',function(){
    gulp.watch('views/src/js/*.js',function(event){//event事件
        var paths=watchPath(event,'views/src/js','views/dist/js');
        /*
        paths
            { srcPath: 'src/js/log.js',
              srcDir: 'src/js/',
              distPath: 'dist/js/log.js',
              distDir: 'dist/js/',
              srcFilename: 'log.js',
              distFilename: 'log.js' }
        */
        gutil.log(gutil.colors.green(event.type)+' '+paths.srcPath);
        gutil.log('Dist '+paths.distPath);
        var combined=combiner.obj([
            gulp.src(paths.srcPath),
            sourcemaps.init(),
            uglify(),
            rename({suffix:'.min'}),
            sourcemaps.write('./'),
            gulp.dest(paths.distDir),
            ]);
        combined.on('error',handleError);
    })
});
//压缩全部JS
gulp.task('uglifyjs',function(){
    gulp.src(['views/src/js/*.js','!views/src/js/*.min.js'])
        .pipe(rename({suffix:'.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('views/dist/js'))
});
//压缩单个css文件
gulp.task('watchcss', function () {
    gulp.watch('views/src/css/*.css', function (event) {
        var paths = watchPath(event, 'views/src/', 'views/dist/');

        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);
        gutil.log('Dist ' + paths.distPath);

        gulp.src(paths.srcPath)
            .pipe(sourcemaps.init())
            .pipe(autoprefixer({
              browsers: 'last 2 versions'
            }))
            .pipe(minifyCSS())
            .pipe(rename({suffix:'.min'}))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(paths.distDir))
    })
});
//压缩全部css
gulp.task('minifycss',function(){
    gulp.src('views/src/css/*.css')
        .pipe(sourcemaps.init())
        .pipe(autoprefixer({
            browsers:'last 2 versions'
        }))
        .pipe(minifyCSS())
        .pipe(rename({suffix:'.min'}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('views/dist/css'))
});
//压缩image图片
gulp.task('watchimages', function () {
    gulp.watch('views/src/images/*.*', function (event) {
        var paths = watchPath(event,'views/src/','views/dist/')

        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
        gutil.log('Dist ' + paths.distPath)

        gulp.src(paths.srcPath)
            .pipe(imagemin({
                progressive: true
            }))
            .pipe(gulp.dest(paths.distDir))
    })
});

gulp.task('images', function () {
    gulp.src('views/src/images/*.*')
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('views/dist/images'))
});
//默认启动任务
gulp.task('default',['watchjs','watchcss','watchimages']);

    5.命令行输入gulp，即可看到信息

6.关于合并js文件

//合并压缩js文件
gulp.task('script',function(){
    //找到文件
    gulp.src(['views/src/js/*.js','!views/src/js/*.min.js'])
    //合并所有js到main.js
        .pipe(concat('main.js'))
        .pipe(gulp.dest('views/dist/js'))
    //压缩文件
        .pipe(rename({suffix:'.min'}))
        .pipe(uglify())
    //另存压缩文件
        .pipe(gulp.dest('views/dist/js'))
});

附一个gulp入门指南的连接，感觉写的挺好https://github.com/nimojs/gulp-book