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

領(lǐng)導(dǎo)說這次打包用gulp 你覺得怎么樣，你說行就行咯，反正我又不敢頂嘴，我又不敢有意見。。

其實(shí)我是弱雞，我真的不會(huì)用

需要什么？

1. 文件合并
2. 文件壓縮
3. es6 轉(zhuǎn)es5
4. 將線下的圖片和音頻路徑替換成七牛的（就是字符串替換唄）
5. 給js加上時(shí)間戳
6. 替換引用路徑

好，開始搞

npm install -g gulp                      //先全局安裝一次
npm install gulp                          //在項(xiàng)目安裝一次
npm install --save-dev gulp         //如果想在安裝的時(shí)候把gulp寫進(jìn)項(xiàng)目package.json文件的依賴中，則可以加上--save-dev
//后面引入的包  引入什么包就npm install 包的名字

//先創(chuàng)建一個(gè)文件名為gulpfile.js文件

  var gulp = require('gulp');                                        //引包
  var concat = require('gulp-concat');                        //- 多個(gè)文件合并為一個(gè)；
  var uglify = require('gulp-uglify');                             //- 壓縮js文件
  var babel = require('gulp-babel');                            //- es5轉(zhuǎn)es6
  var replace = require('gulp-replace');                       //- 替換字符串
  var rename = require('gulp-rename')                        //- 替換名字
  var minifyHTML   = require('gulp-minify-html');         //html壓縮 
  var rev = require('gulp-rev');                                      //- 對(duì)文件名加MD5后綴
  var revCollector = require('gulp-rev-collector');         //- 路徑替換        

gulp.task('minifyjs',function(){        //開啟一個(gè)任務(wù)
         return gulp.src(['./assets/js/index.js','./assets/js/managers/test.js'])           //選擇合并的JS原路徑
        .pipe(babel({            //es6轉(zhuǎn)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 () {                //開啟一個(gè)給JS添加MD5后綴的任務(wù)    
    return gulp.src('dist/js/clue_build.min.js')      //輸入原路徑
        .pipe(rev())               //調(diào)用方法
        .pipe( rev.manifest())
        .pipe( gulp.dest( 'dist/js' ) );      //輸出新的路徑
});

 gulp.task('rev', function () {          //開啟一個(gè)替換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() {         //開啟一個(gè)copy任務(wù)
        return gulp.src(['./assets/js/level.json'])
        .pipe(gulp.dest('dist/js'))
  }); 



gulp.task('default', ['minifyjs','scripts','rev','copy']);    //調(diào)用所有任務(wù)

跑完后所有線上文件都在dist目錄下，只需要將dist傳上就好了！
每一個(gè)任務(wù)都可以適當(dāng)?shù)囊筒灰? 可以選擇自己需要的功能。