2): 給壓縮後的檔案新增min字尾名reqiure(『gulp-rename』)
引入完成後,需要執行npm install gulp-rename
var rename = reqiure(『gulp-rename』)
gulp.task(『watch』,function()))
.pipe(gulp.dest(paths.distdir));
}) })
3):如果多個檔案合併,需要引入require(『gulp-concat』);
引入完成後,需要執行npm install gulp-concat
//1、引入包
var gulp = require(『gulp);//引入gulp包
var concat = require(『gulp-concat』);//引入支援合併的包
//2.建立任務
gulp.task(『concat』,function()
); 4): 如果我們想壓縮html檔案中的** 則使用gulp-htmlmin這個包
引入完成後,需要執行npm install gulp-htmlmin
var gulp = require(『gulp』);
var htmlmin = require(『gulp-htmlmin』);
gulp.task (『htmlmin』,function()))
.pipe(gulp.dest(『dist』))
});
5):新增監聽事件,
gulp.task(『testwatch』,function());
6): 如果是壓縮css檔案,在開始需要引入minifycss = require(『gulp-minify-css』);
gulp.task(『minifycss』, function() );
7): 執行壓縮前,先刪除資料夾裡的內容
//執行刪除的時候不要把目錄定在build的子目錄中,windows刪除目錄的同時會報錯
gulp.task(『clean』, function(cb) );
gulp專案構建小結
告別了jquery,現在想分享下我們專案構建所使用的技術。1 es6 2 browserify 3 babelify 4 gulp 5 concat 6 browser sync 1 使用es6的模組管理 同時可以使用es6的語法糖了!2 使用browserify進行模組打包 3 babelify結...
gulp 入門 使用gulp壓縮css
壓縮 css 可降低 css 檔案大小,提高頁面開啟速度。規律轉換為 gulp 找到css 目錄下的所有 css 檔案,壓縮它們,將壓縮後的檔案存放在dist css 目錄下。一 安裝 gulp minify css 模組 在命令列輸入sudo npm install gulp minify css...
gulp基本使用
gulp強調的是前端開發的工作流程,我們可以通過定義task事件定義事件的執行順序,gulp去執行這些事件,構建整個前端開發的工作流程 gulp常見定義事件,例如 下面會說幾個常見的gulp模組,列舉功能和例子,希望你看完本章後能對gulp有個基本的掌握,能參照這裡的寫法,當需要使用時去官網上會自主...