gulp构建工具学习（day1)

什么是gulp

gulp是基于node.js的一个构建工具，所谓的构建工具是让coding者们通过简单的配置就可以实现合并，压缩，校验，预处理等功能的开发工具，同类型的开发工具有Grunt、Gulp、webpack等

安装

全局安装
npm install -g gulp
本地安装
npm install gulp –save-dev
本地安装是为了把gulp作为项目的依赖
创建gulpfile.js，构建一个简单的实例，定义一个任务，执行任务中的代码逻辑

// 引入gulp模块
var gulp = require('gulp');
 gulp.task('default,function(){
     // 任务代码
 });

gulp命令
gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数

gulp.run(tasks…)：尽可能多的并行运行多个task

gulp.watch(glob, fn)：当glob内容发生改变时，执行fn

gulp.src(glob)：置需要处理的文件的路径，可以是多个文件以数组的形式，也可以是正则

gulp.dest(path[, options])：设置生成文件的路径

glob：可以是一个直接的文件路径。他的含义是模式匹配。
gulp将要处理的文件通过管道（pipe()）API导向相关插件。通过插件执行文件的处理任务。

gulp.task(‘default’, function () {…});

gulp.task这个API用来创建任务，在命令行下可以输入$ gulp [default],(中括号表示可选）来执行上面的任务。
gulp官方API文档：https://github.com/gulpjs/gul…
gulp 插件大全：http://gulpjs.com/plugins/
常用gulp插件
================常用插件=====================
sass的编译 （gulp-ruby-sass）
自动添加css前缀 （gulp-autoprefixer）
压缩css （gulp-minify-css）
js代码校验 （gulp-jshint）
合并js文件 （gulp-concat）
压缩js代码 （gulp-uglify）
压缩图片 （gulp-imagemin）
自动刷新页面 （gulp-livereload）
图片缓存，只有图片替换了才压缩 （gulp-cache）
更改提醒 （gulp-notify）
清除文件 （del）
从命名 （gulp-rename）

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

———————-以下内容均为引用内容—————————
常用插件的添加方法
自动添加前缀 autoprefixer
先安装 gulp-autoprefixer 包 ：
$ cnpm 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'));
})

常见函数的含义
1. gulp.task() 用于构建任务，去配置我们的具体任务
2. gulp.src()用于获取需要构建资源的路径传递的参数必须是个路径，常见的配置项 {base:’./’}
3. gulp.dest() 放置构建好的资源路径，传递参数也是一个路径
4. 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-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'));
})

压缩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'));
 });

把文件名修改成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-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'));
})

优化上述逻辑

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']);

—————————————–引用结束———————-
作者网址：glup构建工具整理
gulp插件库
http://gulpjs.com/plugins/