用gulp打包釋出專案
在釋出之前還可以做程式碼優化:
1.壓縮
2.合併
3.增加版本號
首先,手動打包釋出的網站比如:https://javascript-minifier.com
顯然,手動打包麻煩費時費力的,那自從node.js出來以後,方便快捷,自動化處理。
打包的主流3個工具:
1.Grunt 自動化構建工具
2.gulp 自動化構建工具
3.webpack 靜態資源打包工具
易於使用
通過程式碼優於配置的策略,Gulp 讓簡單的任務簡單,複雜的任務可管理。
構建快速
利用 Node.js 流的威力,你可以快速構建專案並減少頻繁的 IO 操作。
外掛高質
Gulp 嚴格的外掛指南確保外掛如你期望的那樣簡潔高質得工作。
易於學習
通過最少的 API,掌握 Gulp 毫不費力,構建工作盡在掌握:如同一系列流管道。
先安裝nodejs,然後在npm命令列裡輸入 npm init
生成package.json檔案,裡面儲存一些依賴項,下面是安裝:
執行 gulp -v
,出現版本號,代表安裝成功。
gulpfile.js 存放想要執行的任務。
首先宣告好要依賴的載入項,var gulp=require('gulp')
gulpfile.js 中定義任務,
gulp.task('task-name',function(){
});
接下來安裝gulp的各種外掛,
npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev
修改gulpfile.js檔案
var gulp=require('gulp');
var rev=require('gulp-rev');/*給檔案用雜湊碼新增版本號*/
var revReplace=require('gulp-rev-replace');/*更新引用*/
var useref=require('gulp-useref');/*合併檔案*/
var filter=require('gulp-filter');/*過濾器:篩選,恢復*/
var uglify=require('gulp-uglify');/*壓縮js*/
var csso=require('gulp-csso');/*壓縮css*/
gulp.task('task-name',function(){
var jsFilter=filter('**/*.js',{restore:true});
var cssFilter=filter('**/*.css',{restore:true});
var indexHtmlFilter=filter(['**/*','!**/index.html'],{restore:true});
return gulp.src('src/html')/*需要處理的檔案*/
.pipe(useref())/*處理註釋壓縮*/
.pipe(jsFilter)/*篩選js檔案*/
.pipe(uglify())/*壓縮js檔案*/
.pipe(jsFilter.restore)/*放回流裡*/
.pipe(cssFilter)/*篩選css檔案*/
.pipe(csso())/*壓縮css檔案*/
.pipe(cssFilter.restore)/*放回流裡*/
.pipe(indexHtmlFilter)/*篩選html檔案*/
.pipe(rev())/*生成雜湊版本號*/
.pipe(indexHtmlFilter.restore)/*放回流裡*/
.pipe(revReplace())/*更新index引用*/
.pipe(gulp.dest('dist'));/*檔案流放到dist目錄下*/
});
執行 gulp task-name
gulp-useref外掛的使用:在html中加入註釋打包部分的程式碼
這裡只實現了gulp的打包壓縮和版本檔名的功能,其實,還有很多更厲害的功能
比如
gulp-watch監聽檔案的改變,自動執行任務,
gulp-postcss和 autoprefixer 新增瀏覽器的字首,對css檔案進行處理,
gulp-concat把多個檔案直接合併成一個檔案,
gulp-responsive實現圖片響應式
等等