gulp的菜鸟心得

我是一只快乐的前端小渣渣~~~

领导说这次打包用gulp 你觉得怎么样，你说行就行咯，反正我又不敢顶嘴，我又不敢有意见。。

其实我是弱鸡，我真的不会用

需要什么？

1. 文件合并
2. 文件压缩
3. es6 转es5
4. 将线下的图片和音频路径替换成七牛的（就是字符串替换呗）
5. 给js加上时间戳
6. 替换引用路径

好，开始搞

npm install -g gulp                      //先全局安装一次
npm install gulp                          //在项目安装一次
npm install --save-dev gulp         //如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev
//后面引入的包  引入什么包就npm install 包的名字

//先创建一个文件名为gulpfile.js文件

  var gulp = require('gulp');                                        //引包
  var concat = require('gulp-concat');                        //- 多个文件合并为一个；
  var uglify = require('gulp-uglify');                             //- 压缩js文件
  var babel = require('gulp-babel');                            //- es5转es6
  var replace = require('gulp-replace');                       //- 替换字符串
  var rename = require('gulp-rename')                        //- 替换名字
  var minifyHTML   = require('gulp-minify-html');         //html压缩 
  var rev = require('gulp-rev');                                      //- 对文件名加MD5后缀
  var revCollector = require('gulp-rev-collector');         //- 路径替换        

gulp.task('minifyjs',function(){        //开启一个任务
         return gulp.src(['./assets/js/index.js','./assets/js/managers/test.js'])           //选择合并的JS原路径
        .pipe(babel({            //es6转es5
            presets: ['env']
        }))    
        .pipe(concat('XX_build.js'))            //合并js
        .pipe(replace('/assets/images/', 'https://路径'))     //替换图片路径
        .pipe(replace('/assets/sound/', 'https://路径'))       //替换音频路径
        .pipe(rename({suffix:'.min'}))           //重命名
        .pipe(uglify())                                  //压缩
        .pipe(gulp.dest('dist/js'))                 //输出新的路径
 });


 gulp.task('scripts', function () {                //开启一个给JS添加MD5后缀的任务    
    return gulp.src('dist/js/clue_build.min.js')      //输入原路径
        .pipe(rev())               //调用方法
        .pipe( rev.manifest())
        .pipe( gulp.dest( 'dist/js' ) );      //输出新的路径
});

 gulp.task('rev', function () {          //开启一个替换html中引用的js路径
    return gulp.src(['dist/js/rev-manifest.json', './index.html'])      //获取html文件
        .pipe( revCollector({             //替换
            replaceReved: true,
        }) )
        .pipe( minifyHTML({          //压缩
                empty:true,
                spare:true
            }) )
        .pipe( gulp.dest('dist') );     //输出
});

  gulp.task('copy',  function() {         //开启一个copy任务
        return gulp.src(['./assets/js/level.json'])
        .pipe(gulp.dest('dist/js'))
  }); 



gulp.task('default', ['minifyjs','scripts','rev','copy']);    //调用所有任务

跑完后所有线上文件都在dist目录下，只需要将dist传上就好了！
每一个任务都可以适当的要和不要 可以选择自己需要的功能。