gulp的使用实例

流程记录

步骤：
1、全局安装gulp
npm install -g gulp
2、然后找一个指定文件位置，
touch gulpfile.js,创建这个文件
npm init -y,创建package.json文件
3、在这个指定文件位置中局部安装gulp，这样安装依赖就都会记录在package.json文件中。
npm install gulp -D
4、在gulpfile.js中写入需要用到的插件的声明，引入插件：
下面列举，此次例子中，我需要用到的插件：

var gulp = require('gulp');

var cssnano =require('gulp-cssnano');
var concat =require('gulp-concat');
var imagemin=require('gulp-imagemin');
var autoprefixer=require('gulp-autoprefixer');
var clean= require('gulp-clean');
var uglify = require('gulp-uglify');
var rev =require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');

5、根据需要按顺序依次安装gulp的插件：使用到的有：
（1）用于清除内容的：每次测试可以删除原有的合并文件，重新生成
npm install --save-dev gulp-clean
（2）用于css压缩的：
npm install gulp-cssnano --save-dev
（3）用于文件合并的：将多个同后缀的文件做合并
npm install gulp-concat --save-dev
（4）用于css后编译，自动生成添加hack兼容前缀的：
npm install --save-dev gulp-autoprefixer
具体使用：在gulpfile.js中设置：

gulp.task("build:css",function(){
    gulp.src('./dist/css/*.css').pipe(clean());
    return gulp.src('./src/css/*.css')
        .pipe(concat('index-merge.css'))
        .pipe(cssnano())
        .pipe(autoprefixer({
            browsers:['last 2 versions'],
            cascade:false
        }))
        .pipe(gulp.dest('./dist/css'))
})

（5）用于图片压缩的：
npm install --save-dev gulp-useref

gulp.task("build:img",function(){
    gulp.src('./dist/img/*').pipe(clean());
    return gulp.src('./src/img/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/img'))
})

（6）用于js文件压缩合并的：
npm install --save-dev gulp-uglify

gulp.task('build:js',function(){
    gulp.src('./dist/js/*.js').pipe(clean());
    return gulp.src('./src/js/*.js')
             .pipe(uglify())
             .pipe(concat('merge.js'))
             .pipe(gulp.dest('./dist/js'))
})

（7）用于生成文件版本号的（css或js）：
npm install --save-dev gulp-rev
（8）用于通过rev.manifest()生成的文件版本号映射关系，来替换html文件中的css和js引用位置。
npm install --save-dev gulp-rev-replace
注意：在src的index.html中css和js的原先引用位置，要写上以下两句的注释行，让rev-replace插件识别：

Paste_Image.png

Paste_Image.png

（9）用于解析html资源位置的
npm install --save-dev gulp-useref
注意：设置desk位置为dist文件夹下，配合（8）的插件一起使用，识别替换css文件和js文件后，dist中的index.html的css和js引用替换结果：

Paste_Image.png

注意：（7）（8）（9）是同步一起使用的，具体为：
在gulpfile.js中设置：

gulp.task('revision',['build:css','build:js'],function(){
    return gulp.src(['./dist/css/*.css','./dist/js/*.js'])
        .pipe(rev())
        .pipe(gulp.dest('./dist'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./dist'))
})

gulp.task('index',['revision'],function(){
    var manifest = gulp.src('./dist/rev-manifest.json');

    return gulp.src('./src/index.html')
        .pipe(revReplace({
            manifest:manifest
        }))
        .pipe(useref())
        .pipe(gulp.dest('./dist'));
})

6、执行，生成效果：

直接在git bush中执行task的名称，就能执行插件工具的设置。

Paste_Image.png

或者也可以，写一个综合的task，多个task组合成数组，然后一次执行：

gulp.task('default',['build:img','build:css','build:js'])

Paste_Image.png

注意版本号的作用，当发布线上之后，开发环境还需要做改动时，随着修改样式或js等文件的监听，会重新执行一次合并压缩，指定再执行生成一次新的版本号，这样，用户查看页面时，引用的css和js文件名就不会出现可能去走缓存的情况，或者因为名称修改了，依赖暂时没有刷新同步过来，而页面暂时出错的情况