安裝並使用gulp小結

2021-08-25 14:28:20 字數 1054 閱讀 6924

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有個基本的掌握,能參照這裡的寫法,當需要使用時去官網上會自主...