以往用jq寫頁面，都是在本地直接打開html文件，修改之后在瀏覽器F5刷新才能看到變化，實在是相當(dāng)費勁。為了以后節(jié)省更多的開發(fā)時間，實現(xiàn)能夠監(jiān)聽改動，最后自動構(gòu)建和打包，我特地學(xué)習(xí)了gulp。
gulp是一款基于stream（流）的自動化構(gòu)建工具，主要用來設(shè)定程序自動處理靜態(tài)資源的工作。簡單的說，gulp就是用來打包項目的。gulp很容易上手，只要掌握幾個api即可。
官網(wǎng)：https://gulpjs.com/
中文官網(wǎng)：https://www.gulpjs.com.cn/docs/
我使用gulp主要是為了想做css、js、image資源的壓縮和打包，添加時間戳。這里我引入gulp的幾個插件：
images：
gulp-imagemin [ 壓縮圖片 ]
css：
gulp-sass [ sass編譯，我習(xí)慣用sass寫樣式，這里需要這個插件幫助轉(zhuǎn)css ]
gulp-postcss、autoprefixer [ 根據(jù)設(shè)置瀏覽器版本自動處理瀏覽器前綴，使用她我們可以很瀟灑地寫代碼，不必考慮CSS針對瀏覽器的兼容性問題 ]
postcss-px2rem [ px轉(zhuǎn)rem ]
cssmin [ 壓縮css ]
javascript：
gulp-uglify [ 壓縮js ]
還有其他幾個插件：
gulp-clean [ 刪除文件、文件夾 ]
run-sequence [ 按順序執(zhí)行task ，這個很重要，因為gulp中task是異步進(jìn)行的，有時候有些任務(wù)需要先完成A才能執(zhí)行B，不然會報錯 ]
gulp-rev [ 添加時間戳 ]
gulp-rev-collector [ 時間戳添加后再在html?里面替換原有的文件 ]
browser-sync [ 讓瀏覽器實時、快速響應(yīng)文件更改（html、js、css、sass、less等）并自動刷新頁面 ]
gulp可以讓你根據(jù)需要自定義你的工作流。在此附上我的項目結(jié)構(gòu)
安裝：
首先確認(rèn)你的環(huán)境都準(zhǔn)備好了，安裝gulp?？蓞⒖?a target="_blank">https://gulpjs.com/docs/en/getting-started/quick-start
最后gulp -v # 測試是否安裝成功
在根目錄下創(chuàng)建gulpfile.js，這個文件用來配置所有任務(wù)。
首先將需要用到的插件下載安裝：npm install 插件名 --save-dev。
在gulpfile.js中引用所用到的所有插件，注意：gulp要首先被引用。
然后是創(chuàng)建任務(wù)，如果任務(wù)較多，可以分小任務(wù)創(chuàng)建。
//?壓縮css
????gulp.task('miniCss',?function?()?{
????????return?gulp.src(['src/resource/css/*.scss'])
????????????.pipe(sass().on('error',?function?(err)?{
????????????????console.error('Error',?err.message);
????????????}))
????????????.pipe(postcss([px2rem({remUnit:?100}),?autoprefixer()]))
????????????//?保留一份原文件
????????????//?.pipe(gulp.dest('dist/resource/css'))
????????????.pipe(postcss([?autoprefixer()?]))
????????????.pipe(cssmin())
????????????.pipe(rev())?//css增加md5版本號，6位
????????????.pipe(gulp.dest('dist/resource/css'))
????????????.pipe(rev.manifest())
????????????.pipe(gulp.dest('rev/css'));
????});
????//?壓縮js
????gulp.task('miniScripts',?function?()?{
????????return?gulp.src('src/resource/js/*.js')
????????????//?.pipe(gulp.dest('dist/resource/js'))
????????????.pipe(uglify())
????????????.pipe(rev())?//css增加md5版本號，6位
????????????.pipe(gulp.dest('dist/resource/js'))
????????????.pipe(rev.manifest())
????????????.pipe(gulp.dest('rev/js'));
????});
????//?輸出i18n
????gulp.task('copy',??function()?{
????????return?gulp.src('src/resource/i18n/**/*.properties')
????????.pipe(gulp.dest('dist/resource/i18n/'))
????});
????//?輸出字體
????gulp.task('font',?function?()?{
????????return?gulp.src('src/resource/fonts/*.{otf,eot,svg,ttf,woff,woff2}')
????????????.pipe(gulp.dest('dist/resource/fonts'))
????});
????//?輸出html
????gulp.task('html',?function?()?{
????????return?gulp.src(['src/*.html'])
????????????.pipe(gulp.dest('dist'));
????});
????//?壓縮圖片
????gulp.task('miniImages',?function?()?{
????????return?gulp.src('src/resource/images/*.{jpg,png,gif,ico}')
????????????.pipe(imagemin())?
????????????.pipe(gulp.dest('dist/resource/images'))
????});
????//?給有引用靜態(tài)資源的html更改引用的文件名字
????gulp.task('rev',?function()?{
????????gulp.src(['rev/**/*.json',?'src/*.html'])????????????????????
????????.pipe(revCollector())???????????????????????????????????
????????.pipe(gulp.dest('dist'));????????????????????????????????
????});
//?開啟服務(wù)，監(jiān)聽代碼改動自動刷新頁面
gulp.task('browserSyncInit',?function?()?{
????????browserSync.init({
????????????server:?{
????????????????baseDir:?"./dist",
????????????????index:?'/index.html',
????????????},
????????????port:?8989
????????})
????});
????//?清空dist
????gulp.task('clean',?function?()?{
????????return?gulp.src('dist',?{read:?false})
????????????.pipe(clean());//清除dist目錄
????});
上面將多個任務(wù)分別聲明，然后通過組合將上面的任務(wù)串起來：
?//?build組合
????gulp.task('build',?function(done)?{
????????runSequence(
????????????['font',?'copy',?'miniImages'],
????????????['miniCss'],
????????????['miniScripts'],
????????????['rev'],
????????????['browserSyncInit'],
????????????done);
????});
?????//?打包命令
????gulp.task('default',?function?(done)?{
????????runSequence(
????????????['clean'],
????????????['build'],
????????????done);
????});
默認(rèn)在命令窗口執(zhí)行g(shù)ulp，就會執(zhí)行名為default的task。于是我們命令打包生成了文件夾dist，并且終端開啟了一個localhost:8989服務(wù)。我們可以借此查看生成的dist文件在服務(wù)上能否正常運行。
上面實現(xiàn)了代碼的壓縮打包，gulp實現(xiàn)監(jiān)聽文件變化其實也是類似，不多說，附上代碼：
//?監(jiān)聽任務(wù)
????//?監(jiān)聽css
????gulp.task('listenCss',?function?()?{
????????return?gulp.src(['src/resource/css/*.scss'])
????????????.pipe(sass().on('error',?function?(err)?{
????????????????console.error('Error',?err.message);
????????????}))
????????????.pipe(postcss([px2rem({remUnit:?100}),?autoprefixer()]))
????????????.pipe(postcss([?autoprefixer()?]))
????????????.pipe(gulp.dest('test/resource/css'))
????????????.pipe(browserSync.stream());
????})
????//?監(jiān)聽js
????gulp.task('listenScripts',?function()?{
????????return?gulp.src(['src/resource/js/*.js'])
????????????.pipe(gulp.dest('test/resource/js'))
????????????.pipe(browserSync.stream());
????})
????//?輸出i18n
????gulp.task('listenI18n',??function()?{
????????return?gulp.src('src/resource/i18n/**/*.properties')
????????????.pipe(gulp.dest('test/resource/i18n/'))
????????????.pipe(browserSync.stream())
????});
????//?刷新html
????gulp.task('htmlReload',?function?()?{
????????return?gulp.src('src/*.html')
????????????.pipe(gulp.dest('test'))
????????????.pipe(browserSync.stream());
????});
????//?監(jiān)聽圖片
????gulp.task('listenImages',?function?()?{
????????return?gulp.src('src/resource/images/*.{jpg,png,gif,ico}')
????????????.pipe(gulp.dest('test/resource/images'));
????});
????//?輸出字體
????gulp.task('listenFonts',??function()?{
????????return?gulp.src('src/resource/fonts/*.{otf,eot,svg,ttf,woff,woff2}')
????????.pipe(gulp.dest('test/resource/fonts'));
????});
????//?監(jiān)聽
????gulp.task('watch',?function?()?{
????????gulp.watch('src/resource/css/*.scss').on('change',?function?(file)?{
????????????gulp.start('listenCss');
????????});
????????gulp.watch('src/resource/js/*.js').on('change',?function?(file)?{
????????????gulp.start('listenScripts');
????????});
????????gulp.watch('src/*.html').on('change',?function(){
????????????gulp.start('htmlReload');
????????});
????????gulp.watch('src/resource/i18n/**/*.properties').on('change',?function?(file)?{
????????????gulp.start('listenI18n');
????????});
????});
//?清空test
????gulp.task('cleanTest',?function?()?{
????????return?gulp.src('test',?{read:?false})
????????????.pipe(clean());//清除test目錄
????});
gulp.task('browserSyncTestInit',?function?()?{
????????browserSync.init({
????????????server:?{
????????????????baseDir:?"./test",
????????????????index:?'/index.html',
????????????},
????????????port:?8989
????????})
????});
//?dev組合
????gulp.task('develop',?function(done){
????????runSequence(
????????????['listenFonts',?'listenI18n',?'listenImages'],
????????????['listenCss'],
????????????['listenScripts'],
????????????['htmlReload'],
????????????['browserSyncTestInit'],
????????????done);
????});
????//?本地跑命令
????gulp.task('dev',?function?(done)?{
????????runSequence(
????????????['cleanTest'],
????????????['develop'],
????????????['watch'],
????????????done);
????});
在終端輸入“gulp dev”即可。
