gulp的使用与遇过的坑

一：

记录错误：

Gulp Error: Cannot find module ‘jshint/src/cli’

问题原因：
插件安装不完全，新版本gulp做了一些调整好像。。。。

解决方法：
使用npm install –save-dev jshint gulp-jshint
而不是npm install –save-dev gulp-jshint

二：
需求：利用gulp生成带版本号的静态文件，这样可以避免静态文件缓存问题导致服务器那边改动代码，而客户端用户却没有收到相应的修改。

问题：利用gulp自动生成带版本号的静态文件，并自动映射到html文件里面，然后用网上很多教程都实现不了，检测出原因可能是由于版本号的各种原因，最后找到一个解决的方案，代码如下图：

gulpfile.js

var gulp = require('gulp'),
    htmlmini = require('gulp-html-minify'),
    useref = require('gulp-useref'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    csso = require('gulp-clean-css'),
    filter = require('gulp-filter'),
    RevAll = require('gulp-rev-all'),
    del = require('gulp-clean');

gulp.task('default',['del'],function () {
    var jsFilter = filter('**/main.js',{restore:true}),
        cssFilter = filter('**/*.css',{restore:true}),
        htmlFilter = filter(['**/*.html'],{restore:true});
    gulp.src('*.html')
        .pipe(useref())                         // 解析html中的构建块
        .pipe(jsFilter)                         // 过滤所有js
        .pipe(uglify())                         // 压缩js
        .pipe(jsFilter.restore)
        .pipe(cssFilter)                        // 过滤所有css
        .pipe(sass().on('error', sass.logError))                        
        .pipe(csso())                           // 压缩优化css
        .pipe(cssFilter.restore)
        .pipe(RevAll.revision({                 // 生成版本号
            dontRenameFile: ['.html'],          // 不给 html 文件添加版本号
            dontUpdateReference: ['.html']      // 不给文件里链接的html加版本号
        }))
        .pipe(htmlFilter)                       // 过滤所有html
        // .pipe(htmlmini())                       // 压缩html
        .pipe(htmlFilter.restore)
        .pipe(gulp.dest('./dist'))

});

gulp.task('del',function () {
    gulp.src(['dist/static/css','dist/static/js'],{read:false})
        .pipe(del());                             
});// 构建前先删除dist文件里的旧版本

gulp.watch('*.html', function(){
    gulp.run('default');

});
gulp.watch('src/js/main.js', function(){
    gulp.run('default');

});
gulp.watch('src/sass/main.scss', function(){
    gulp.run('default');
});

html:生成前

<!-- build:js static/js/jq.js --> 
<script src="common/js/jquery-1.11.3.min.js"></script>
<!-- endbuild -->
<!-- build:js static/js/md5.js --> 
<script src="common/js/md5.min.js"></script>
<!-- endbuild -->
<!-- build:js static/js/main.js --> 
<script src="src/js/main.js"></script>
<!-- endbuild -->

html：生成后

<script src="static/js/jq.895323ed.js"></script>
<script src="static/js/md5.ea27c6f7.js"></script>
<script src="static/js/main.350f86f4.js"></script>