gulp自動化構建前端工程
@第一步:安裝Node環境
可以在這裡下載node進行安裝 https://nodejs.org/en/download/
安裝完成後在命令列輸入node -v 可以看到版本號則安裝成功
@第二部:推薦安裝 cnpm
npm伺服器在國外,網路影響大,甚至還會遇到需要翻牆才能下載外掛的情況,因此推薦安裝cnpm。 注:cnpm跟npm用法完全一致,只是在執行命令時將npm改為cnpm
安裝命令: npm install cnpm -g --registry=https://registry.npm.taobao.org
執行cnpm -v 顯示版本號即安裝成功
@第三部: 安裝gulp
安裝命令:cnpm install gulp -g
-g表示在全域性環境安裝,以便任何專案都能使用它
執行 gulp -v 顯示版本號即安裝成功
@第四部:建立一個專案目錄,初始化配置檔案
webapp就是我新建的目錄。
命令列進入到目錄F:\webapp
執行命令 cnpm init 來新建package.json 直接回車預設值即可
注:package.json是基於nodejs專案必不可少的配置檔案.
@第五步:安裝gulp依賴包到專案中
注:全域性安裝gulp是為了執行gulp任務,本地安裝gulp則是為了呼叫gulp外掛的功能 進入你的專案檔案路徑中後,執行cnpm install gulp --save-dev
@第六步:安裝外掛
cnpm install gulp-load-plugins
cnpm install gulp-clean
cnpm install gulp-rev-collector
cnpm install jshint
cnpm install gulp-minify-html
專案結構
編輯gulpfile.js
var gulp = require('gulp'), minifyCss = require('gulp-minify-css'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), clean = require('gulp-clean') rev = require('gulp-rev'), concat = require('gulp-concat'), // revReplace = require('gulp-rev-replace'), //useref = require('gulp-useref'), minifyHtml = require('gulp-minify-html'), revCollector = require('gulp-rev-collector'); //gulp-clean 清楚目錄 //gulp-minify-css 壓縮CSS為一行 //gulp-rev 對檔名加MD5字尾 //gulp-rev-collector 路徑替換 //gulp-jshint 檢查js語法 //清空資料夾,避免資源冗餘 gulp.task('clean',function(){ return gulp.src('dist',{read:false}).pipe(clean()); }); //css檔案壓縮,更改版本號,並通過rev.manifest將對應的版本號用json表示出來 gulp.task('css',function(){ return gulp.src('app/styles/*.css') //.pipe(concat('wap.min.css')) .pipe(minifyCss()) .pipe(rev()) .pipe(gulp.dest('dist/app/styles/')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/css')) }); //js檔案壓縮,更改版本號,並通過rev.manifest將對應的版本號用json表示出 gulp.task('js',function(){ return gulp.src('app/scripts/*.js') //.pipe( concat('wap.min.js') ) .pipe(jshint()) .pipe(uglify()) .pipe(rev()) .pipe(gulp.dest('dist/app/scripts/')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/js')) }); //js檔案壓縮,更改版本號,並通過rev.manifest將對應的版本號用json表示出 gulp.task('img',function(){ return gulp.src('app/image/*.+(jpg|png|gif)') .pipe(rev()) .pipe(gulp.dest('dist/app/image/')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/img')) }); //通過hash來精確定位到html模板中需要更改的部分,然後將修改成功的檔案生成到指定目錄 gulp.task('rev',function(){ return gulp.src(['dist/rev/**/*.json','app/pages/*.html']) .pipe(revCollector()) .pipe(minifyHtml()) .pipe(gulp.dest('dist/app/pages/')); }); //合併html頁面內引用的靜態資原始檔 gulp.task('html', function () { return gulp.src('dist/app/pages/*.html') .pipe(useref()) .pipe(rev()) .pipe(revReplace()) .pipe(gulp.dest('dist/html/')); })
minifyHtml = require('gulp-minify-html'), revCollector = require('gulp-rev-collector'); //gulp-clean 清楚目錄 //gulp-minify-css 壓縮CSS為一行 //gulp-rev 對檔名加MD5字尾 //gulp-rev-collector 路徑替換 //gulp-jshint 檢查js語法 //清空資料夾,避免資源冗餘 gulp.task('clean',function(){ return gulp.src('dist',{read:false}).pipe(clean()); }); //css檔案壓縮,更改版本號,並通過rev.manifest將對應的版本號用json表示出來 gulp.task('css',function(){ return gulp.src('app/styles/*.css') //.pipe(concat('wap.min.css')) .pipe(minifyCss()) .pipe(rev()) .pipe(gulp.dest('dist/app/styles/')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/css')) }); //js檔案壓縮,更改版本號,並通過rev.manifest將對應的版本號用json表示出 gulp.task('js',function(){ return gulp.src('app/scripts/*.js') //.pipe( concat('wap.min.js') ) .pipe(jshint()) .pipe(uglify()) .pipe(rev()) .pipe(gulp.dest('dist/app/scripts/')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/js')) }); //js檔案壓縮,更改版本號,並通過rev.manifest將對應的版本號用json表示出 gulp.task('img',function(){ return gulp.src('app/image/*.+(jpg|png|gif)') .pipe(rev()) .pipe(gulp.dest('dist/app/image/')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/img')) }); //通過hash來精確定位到html模板中需要更改的部分,然後將修改成功的檔案生成到指定目錄 gulp.task('rev',function(){ return gulp.src(['dist/rev/**/*.json','app/pages/*.html']) .pipe(revCollector()) .pipe(minifyHtml()) .pipe(gulp.dest('dist/app/pages/')); }); //合併html頁面內引用的靜態資原始檔 gulp.task('html', function () { return gulp.src('dist/app/pages/*.html') .pipe(useref()) .pipe(rev()) .pipe(revReplace()) .pipe(gulp.dest('dist/html/')); })
在命令列執行 gulp clean 逐個執行任務
前端資源快取與更新
https://my.oschina.net/jathon/blog/404968
http://www.cnblogs.com/1wen/p/5421212.html
參考
http://jingyan.baidu.com/article/14bd256e7f7d7fbb6d2612c4.html
https://segmentfault.com/a/1190000002932998