我是一只快樂的前端小渣渣~~~
領(lǐng)導(dǎo)說這次打包用gulp 你覺得怎么樣，你說行就行咯，反正我又不敢頂嘴，我又不敢有意見。。
其實我是弱雞，我真的不會用
需要什么？
- 文件合并
- 文件壓縮
- es6 轉(zhuǎn)es5
- 將線下的圖片和音頻路徑替換成七牛的（就是字符串替換唄）
- 給js加上時間戳
- 替換引用路徑
好，開始搞
npm install -g gulp //先全局安裝一次
npm install gulp //在項目安裝一次
npm install --save-dev gulp //如果想在安裝的時候把gulp寫進項目package.json文件的依賴中，則可以加上--save-dev
//后面引入的包 引入什么包就npm install 包的名字
//先創(chuàng)建一個文件名為gulpfile.js文件
var gulp = require('gulp'); //引包
var concat = require('gulp-concat'); //- 多個文件合并為一個；
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'); //- 對文件名加MD5后綴
var revCollector = require('gulp-rev-collector'); //- 路徑替換
gulp.task('minifyjs',function(){ //開啟一個任務(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 () { //開啟一個給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 () { //開啟一個替換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任務(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傳上就好了！
每一個任務(wù)都可以適當(dāng)?shù)囊筒灰? 可以選擇自己需要的功能。
