glup自动化构建工具

实现的功能包括 js压缩，css文件合并压缩并在html加版本号，压缩html文件

1.安装gulp

建议参考官网就行http://www.gulpjs.com.cn/docs/getting-started/

npm install gulp --save -dev   [注：将gulp安装到项目]

npm init    [注：根据提示一步一步创建package.json 最后yes保存]

添加 gulpfile.js文件 如步骤三

webstrom --》run--》选择运行default  这样就运行gulpfile.js文件了 [注：default,意思名为的default的task，如下]

gulp.task(\'default\', [ \'copy\', \'concat\', \'replace\',\'js\']);

 

2.安装插件 主要用到以下插件

安装命令 npm install gulp-uglify gulp-concat gulp-minify-css gulp-rev gulp-rev-collector gulp-replace gulp-htmlmin  --save -dev

3.gulpfile.js文件：

/**
 * Created by jh on 2017/4/6.
 */
var gulp = require(\'gulp\');
var minify = require(\'gulp-uglify\');                            //- 压缩js；
var concat = require(\'gulp-concat\');                            //- 多个文件合并为一个；
var minifyCss = require(\'gulp-minify-css\');                     //- 压缩CSS为一行；
var rev = require(\'gulp-rev\');                                  //- 对文件名加MD5后缀
var revCollector = require(\'gulp-rev-collector\');               //- 路径替换
var replace = require(\'gulp-replace\');                          //替换地址
var htmlmin = require(\'gulp-htmlmin\');                          //压缩html

/*=====================copy其他静态资源文件==========================*/
gulp.task(\'copy\',  function() {
    return gulp.src([\'images/**/*\'])
        .pipe(gulp.dest(\'dist/images\'))
});
/*=====================压缩js==========================*/
gulp.task(\'js\',function(){
    gulp.src(\'js/*.js\') // 匹配
        .pipe(minify())
        .pipe(gulp.dest(\'dist/js\'));  // 写入 \'dist/js\'
});
//gulp.src(\'js/*.js\', { base: \'client\' })//会把源js也压缩
//    .pipe(minify())
//    .pipe(gulp.dest(\'build\'));  // 写入 \'build/js/somedir/somefile.js\'

/*=====================合并、压缩css==========================*/
gulp.task(\'concat\',function(){
    gulp.src([\'css/style.css\', \'css/style.mine.css\'])    //- 需要处理的css文件，放到一个字符串数组里
        .pipe(concat(\'style.rar.css\'))                            //- 合并后的文件名
        .pipe(minifyCss())                                      //- 压缩处理成一行
        .pipe(rev())                                            //- 文件名加MD5后缀
        .pipe(gulp.dest(\'dist/css\'))                               //- 输出文件本地
        .pipe(rev.manifest())                                   //- 生成一个rev-manifest.json
        .pipe(gulp.dest(\'config\'));                      //- 将 rev-manifest.json 保存到 rev 目录内
});

/*=====================打包、修改地址==========================*/
gulp.task(\'replace\',function(){
    gulp.src([\'config/*.json\',\'*.html\'])
        .pipe(revCollector())    //- 执行文件内css名的替换
        .pipe(replace(\'css/\',\'./css/\'))   //替换地址
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest(\'dist\'))
});
//gulp.task(\'replace\',function(){
//    gulp.src([\'config/*.json\', \'*.html\'])   //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
//        .pipe(revCollector())                                   //- 执行文件内css名的替换
//        .pipe(gulp.dest(\'dist\'));                     //- 替换后的文件输出的目录
//});
//gulp.task(\'city\', [\'js\', \'concat\', \'replace\', \'revCollector\']);

gulp.task(\'city\', [ \'copy\', \'concat\', \'replace\',\'js\']);