gulp构建工具整理

gulp 是基于node 的一个构建工具 , 所谓构建工具是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。常见的构建工具包括：Grunt、Gulp、Webpack 以及百度的F.I.S

下面我们来说下gulp ， gulp 提供插件的机制 ，不会产生臃肿 ， 如果有需要再装上相应的插件就可以了。比如这个autoprefixer包，用于css自动添加前缀，其实，gulp不干什么事情，专门指挥它的插件干活。官方文档

安装

• 全局安装
  
  • $ npm install -g gulp

• 本地安装

  • $ npm install gulp –save-dev
  • 本地安装是为了把gulp作为项目的依赖

• 创建gulpfile.js文件 ，定义一个任务，简单的示例：

  // 文件开头，把gulp模块引入进来 , 以后在文章中的示例就不重复获取了
  var gulp = require('gulp');
   gulp.task('default,function(){
       // 任务代码
   });
  

gulp 中常用到的插件和使用方式

• 自动添加前缀 autoprefixer

  • 先安装 gulp-autoprefixer 包 ：
    $ npm install gulp-autoprefixer –save-dev

  • 开始使用

    // 引入模块 autoprefixer 
    var autoprefixer = require('gulp-autoprefixer');
    // 创建一个名称为css的任务
    gulp.task('css',function(){
        /* 获取需要构建的资源 如果有多个src需要传数组的形式，下面会有示例*/
        gulp.src('./css/*.css')
                /*通过管道的方式把资源以流的形式传递给autoprefixer来处理*/
                .pipe(autoprefixer())
                /* 再把处理结果通过管道传递给了gulp.dest() 方法，生成目标文件*/
                .pipe(gulp.dest('./dist'));
    })
    

  • 然后在bash或命令窗口中执行
    $ gulp css

  • 这里总结下几个函数的意思
    

    gulp.task() 用于构建任务，去配置我们的具体任务
    
    gulp.src()用于获取需要构建资源的路径
    传递的参数必须是个路径，常见的配置项 {base:'./'} 
    
    gulp.dest() 放置构建好的资源路径，传递参数也是一个路径
    
    pipe() 是node中的管道，在这里是将上一步处理的结果传给下一步
    

• 合并js插件 gulp-concat

  • 安装插件： $ npm install gulp-concat –save-dev

  • 使用插件：

    // 获取模块
    var concat = require('gulp-concat');
    // 创建任务
    gulp.task('js',function(){
    /*将当前js文件夹下的所有js文件获取到*/
    gulp.src('./js/*.js')
            /*合并成app.js*/
            .pipe(concat('app.js'))
            /*输出到dist文件夹下*/
            .pipe(gulp.dest('./dist'))
    })

  • 执行命令
    $ gulp js

• 图片压缩插件 gulp-imagemin

  • 获取模块
    $ npm install gulp-imagemin –save-dev

  • 使用模块

    var imagemin = require('gulp-imagemin');
    gulp.task('image',function(){
    gulp.src('./image/*')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist'));
    })

  • 执行任务
    $ gulp image

• 压缩html插件 gulp-htmlmin

  • 安装模块
    $ npm install gulp-htmlmin

  • 使用模块

     var htmlmin = require('gulp-htmlmin');
     gulp.task('html',function(){
        gulp.src('./*.html',{
                         "removeComments":true,
                         "collapseWhitespace":true,
                         "minifyJS":true
                })
            .pipe(htmlmin())
            .pipe(gulp.dest('./dist'));
     });
    

  • 执行任务
    $ gulp html

• 把文件名修改成hash值模块 gulp-rev

  • 安装模块
    $ npm install gulp-rev –save-dev

  • 使用模块

    var rev = require('gulp-rev');
    gulp.task('rev',function(){
    /* 下面 ** 的方式叫做global语法，表示目录下面的所有 */
    gulp.src(['./dist/**/*.css','./dist/**/*.js','./dist/**/*'],{base:'./'})
            /* 转换成新的文件名 */
            .pipe(rev())
            .pipe(gulp.dest('./dist'))
            /*收集原文件名与新文件名的关系*/
            .pipe(rev.manifest())
            // 将文件以json的形式存在当前项目下的 ./rev 目录下
            .pipe(gulp.dest('./rev'));
    });

  • 执行任务
    $ gulp rev

• 替换文件路径插件 gulp-rev-collector

  • 安装模块
    $ npm install gulp-rev-collector –save-dev

  • 使用模块

    var revCollector = require('gulp-rev-collector');
    /* 使用这个模块，需要依赖rev任务，所以需要注入rev任务，如果不注入需要先执行rev任务 */
    gulp.task('revCollector',['rev'],function(){
    // 根据生成的json文件，去替换html里的路径
    gulp.src(['./rev/*.json','./dist/*.html'])
           .pipe(revCollector())
           .pipe(gulp.dest('./dest'));
    })

  • 执行任务
    $ gulp revCollector

优化gulp 命令

从上面看到，我们每每去执行一条任务，就要运行一条命令，这样显然是不合理的，所以我们需要进行优化。优化的方式就是任务注入以及 return 的使用
下面是优化的代码：

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var imagemin = require('gulp-imagemin');
var htmlmin = require('gulp-htmlmin');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var uglify = require('gulp-uglify');

// 处理CSS
gulp.task('css', function () {
    return gulp.src('./css/*.css', {base: './'})
               .pipe(autoprefixer())
               .pipe(gulp.dest('./dist'));
});

// 此处就不做CSS压缩的演示了，原理相同。

// 压缩js
gulp.task('js', function() {
    return gulp.src('./js/*.js', {base: './'})
               .pipe(uglify())
               .pipe(gulp.dest('./dist'));
});

// 压缩图片
gulp.task('image', function () {
    return gulp.src('./images/*', {base: './'})
               .pipe(imagemin())
               .pipe(gulp.dest('./dist'));
});

// 压缩html
gulp.task('html', function () {
    return gulp.src('./*.html')
               .pipe(htmlmin({
                   removeComments: true,
                   collapseWhitespace: true,
                   minifyJS: true
               }))
               .pipe(gulp.dest('./dist'));
});

// 生成hash文件名
gulp.task('rev',['css', 'js', 'image', 'html'], function () {
    // 其中加!前缀的是表示过滤该文件
    return gulp.src(['./dist/**/*', '!**/*.html'], {base: './dist'})
               .pipe(rev())
               .pipe(gulp.dest('./dist'))
               .pipe(rev.manifest())
               .pipe(gulp.dest('./rev'));
});

// 替换文件路径
gulp.task('revCollector',['rev'], function () {
    // 根据生成的json文件，去替换html里的路径
    return gulp.src(['./rev/*.json', './dist/*.html'])
               .pipe(revCollector())
               .pipe(gulp.dest('./dist'));
});
// gulp中默认以default为任务名称
gulp.task('default', ['revCollector']);

执行任务 , 在命令行中，我们只需要执行 下面的命令
$ gulp
或者是
$ gulp default
就可以对 项目进行构建了。

上面只是简单的演示了一下， 还有很多问题存在，比如 合并js的时候，使用 gulp-concat 生成的新js里面，原来html里面并没有引用，还需要使用gulp-inject 来将生成的js注入到html，还有很多东西要学习。

常用插件

Gulp-uglify
Gulp-autoprefixer
Gulp-htmlmin
Gulp-less
Gulp-livereload
Gulp-minify-css
Gulp-imagemin
Gulp-concat
gulp-rev
gulp-rev-collector
gulp-clean
gulp-inject

gulp插件库：
http://gulpjs.com/plugins/

找到一些学习的网站：
http://cnodejs.org/topic/5551a6067664e06d7cd4718f
http://www.ydcss.com/archives/83
http://www.gowhich.com/blog/621