自動化構建工具gulp入門（二）

2021-08-20 18:44:46 字數 3809 閱讀 7350

外掛程式官網：

gulp-sass

開發環境下書寫 sass 或 less**，函式式的書寫自己的樣式是一種很好的開發體驗，但我們最終仍需將sass或less編譯轉化為css檔案引入。gulp-sass可以幫助我們完成這部分的工作。

npm install gulp-sass
外掛程式安裝後在gulpfile中引入即可使用。

let sass = require("gulp-sass");


gulp.task("compile:sass",()=>);


gulp.task


("default",["compile:sass"])
如果你要編譯的是less檔案只需把外掛程式換成 gulp-less，用法相同。

gulp-connect

現如今我們的web開發一般都會採用前後端分離的形式，這樣可以解放前端，大大提高開發效率。當然，這也意味著前端要給自己起個服務。gulp-connect 就是這樣乙個專門為我們提供前端服務的外掛程式。

npm install gulp-connect
啟動乙個簡單服務：

let connect = require("gulp-connect");


gulp.task("server",()=>)


});gulp.task


("default",["server"])
服務預設展示目標根目錄下的index.html 檔案。開啟瀏覽器，訪問 localhost:8080 可以看到index.html中的內容。

熱過載

在開發時人們總是希望修改**後就能看到頁面樣式變化，而不是每次都去手動重新整理瀏覽器。熱過載可以徹底解決人們這一困擾。利用gulp-connect 結合我們之前介紹的複製和監聽可以實現這一效果。

let gulp = require("gulp");


let connect = require("gulp-connect");


gulp.task("copy:index",()=>);


gulp.task


('watch',function());


gulp.task


("server",()=>)


});gulp.task


("default",["server","watch"]);
開啟瀏覽器，訪問 localhost:8080 即可看到index.html內容，修改index.html， ctrl+s 儲存可以看到瀏覽器顯示內容為修改後的。

gulp-concat

npm install gulp-concat
用於合併檔案，最常用於合併js、css等檔案。

let connect = require("gulp-connect");


gulp.task("concat",()=>)


gulp.task


("default",["concat"]);
執行命令gulp, 可以看到 script 下 a.js和 b.js的內容都將被合併到dist/js下的vendor.js中。專案上線之前為了優化載入速度，我們一般會進行這樣的合併和**壓縮工作。

gulp-uglify

npm install gulp-uglify
用於**壓縮，壓縮後的效果是**在一行展示

let uglify = require("gulp-uglify");


gulp.task("uglify",()=>);


gulp.task


("default",["uglify"]);
gulp-minify-css

npm install gulp-minify


-css
用於壓縮css，和gulp-uglify 有點像，壓縮後都是在一行顯示。

let minify = require("gulp-minify-css");


gulp.task("style",()=>)
gulp-rename

npm install gulp-rename
檔案的重新命名外掛程式，支援string,function,object三種型別的輸入.在這裡我們只示例string型別的輸入，更多方式的使用你可以在外掛程式官網看的示範。

let rename = require("gulp-rename");


gulp.task("rename",()=>)
gulp-clean

npm install gulp-clean
刪除檔案

let clean = require("gulp-clean");


gulp.task("clean",()=>)
gulp-filter

npm install gulp-filter
檔案過濾，篩選

let filter = require("gulp-filter");


gulp.task("filter",()=>);
gulp-csso

npm install gulp-csso
css 優化壓縮,感覺和gulp-minify-css差不多效果

let csso = require("gulp-csso");


gulp.task("csso",()=>);
gulp-html-minify

npm install gulp-html


-minify
html 檔案內容壓縮, 也是壓縮在一行顯示

let htmlminify = require("gulp-html-minify");


gulp.task("htmlminify",()=>);
gulp-imagemin

npm install gulp-imagemin
壓縮資源大小

let imagemin = require("gulp-imagemin");


gulp.task("imagemin",()=>").pipe(imagemin()).pipe(gulp.dest("dist/images"));


})
gulp-zip

npm install gulp-zip
壓縮檔案為zip包

let zip = require("gulp-zip");


gulp.task("zip",()=>);
gulp-babel

npm install gulp-babel babel-core babel-preset


-env
es6 轉 es5

let babel = require("gulp-babel");


gulp.task("babel",()=>)).pipe(gulp.dest("dist/js"));


});

gulp前端自動化構建工具

gulp是基於node.js的乙個構建工具 自動任務執行器 開發者可以使用它自動化工作流程。一些常見的 重複的任務，例如 網頁自動重新整理 css預處理 檢測 壓縮 等，只需要簡單的命令就能全部完成。使用它可以簡化工作，提高開發效率。gulp優點 簡潔 gulp側重 優於配置 最直觀的感受，更為簡單...

Gulp前端自動化構建工具的應用

gulp前端自動化構建工具的應用 1.引言 實際前端開發不再僅僅是靜態頁面的開發了，豐富的前端技術讓前端的 邏輯越來越複雜，模組化開發和各類框架也增加了在生產環境中部署開發環境 的難度，這種情況下，前端自動化構建在前端開發中尤為重要。我們會遇到下面的問題 a.每次修改了html js css等檔案，...

自動化構建工具 Gulp 簡單的外掛程式使用

gulp經常使用的外掛程式 gulp htmlmin html壓縮元件 gulp minify css css壓縮元件 gulp uglify js壓縮元件 gulp conca 多檔案合併元件 gulp smu 壓縮 gulp sourcemaps 內聯源對映 gulp jshint js語法檢查...