gulp經常使用的外掛程式：
gulp-htmlmin html壓縮元件
gulp-minify-css css壓縮元件
gulp-uglify js壓縮元件
gulp-conca 多檔案合併元件
gulp-smu**** 壓縮
'gulp-sourcemaps 內聯源對映
gulp-jshint js語法檢查
下面為我使用時的一些**示例:
const gulp =
require
('gulp'
)// html壓縮元件
const htmlmin =
require
('gulp-htmlmin'
)// css壓縮元件
const cleancss =
require
('gulp-clean-css'
)// js壓縮元件
const uglify =
require
('gulp-uglify'
)// 內聯源對映嵌入原始檔
const sourcemaps =
require
('gulp-sourcemaps'
)// 多個檔案合併成乙個
const concat =
require
('gulp-concat');
// 壓縮
const imagemin =
require
("gulp-smu****"
)// 第乙個測試任務
function
first()
// html壓縮任務
function
html()
)).pipe
(gulp.
dest
('./dist'))
}// css壓縮任務
function
css())
).pipe
(gulp.
dest
('./dist/css'))
}// js壓縮任務
functionjs(
)// 合併檔案
function
concatcss()
)).pipe
(gulp.
dest
('./dist/css'))
.pipe
(cleancss()
).pipe
(gulp.
dest
('./dist'))
}// 壓縮任務
function
imagemini()
exports.first=first
exports.html = html
exports.css = css
exports.js = js
exports.concatcss = concatcss
exports.imagemini=imagemini
exports.
default
= gulp.
series
(html,css,js,concatcss,imagemini)
gulp前端自動化構建工具
gulp是基於node.js的乙個構建工具 自動任務執行器 開發者可以使用它自動化工作流程。一些常見的 重複的任務，例如 網頁自動重新整理 css預處理 檢測 壓縮 等，只需要簡單的命令就能全部完成。使用它可以簡化工作，提高開發效率。gulp優點 簡潔 gulp側重 優於配置 最直觀的感受，更為簡單...
自動化構建工具gulp入門（二）
外掛程式官網 gulp sass 開發環境下書寫 sass 或 less 函式式的書寫自己的樣式是一種很好的開發體驗，但我們最終仍需將sass或less編譯轉化為css檔案引入。gulp sass可以幫助我們完成這部分的工作。npm install gulp sass外掛程式安裝後在gulpfile...
Gulp前端自動化構建工具的應用
gulp前端自動化構建工具的應用 1.引言 實際前端開發不再僅僅是靜態頁面的開發了，豐富的前端技術讓前端的 邏輯越來越複雜，模組化開發和各類框架也增加了在生產環境中部署開發環境 的難度，這種情況下，前端自動化構建在前端開發中尤為重要。我們會遇到下面的問題 a.每次修改了html js css等檔案，...