前端自動化工具 gulp

gulp是乙個前端自動化構建工具，主要用來設定程式自動處理靜態資源的工作。

使用gulp，可以輕鬆實現對html，css，js進行壓縮的目的。產品發布時，可以有效縮小**大小。

gulp是nodejs的乙個工具，因此可以使用npm進行安裝。

$npm

install gulp

刪除無用的空格，刪除html中的注釋等

var options =

;gulp.src(
'src/**/*.html'
) .pipe(htmlmin(options))
.pipe(gulp.dest(
'dest/'
));

gulp.

src(
'src/**/*.css').
pipe
(minifycss()
).pipe
(gulp.
dest
('dest'))
;

gulp.

src(
'src/**/*.js').
pipe
(uglify()
).pipe
(gulp.
dest
('dest'))
;

var gulp =

require
('gulp');
var htmlmin =
require
('gulp-htmlmin');
var uglify =
require
('gulp-uglify');
var minifycss =
require
('gulp-minify-css');
function
build_html
(cb)
; gulp.
src(
'src/**/*.html').
pipe
(htmlmin
(options)).
pipe
(gulp.
dest
('dest/'))
;cb()
;}function
build_js
(cb)))
.pipe
(gulp.
dest
('dest'))
;cb()
;}function
build_css
(cb)
exports.
default
= gulp.
parallel
(build_html, build_js, build_css)
;

gulp構建自動化工具

首先確保gulp是全域性變數 npm install g gulp安裝完之後 gulp v 檢視版本 gulp v首先安裝 gulp yarn add gulpes6 es5 yarn add gulp babel 7.0.1 babel core babel preset es2015本地服務 y...

前端自動化工具plopjs

plop對於模板 的處理選擇了 handlebars 作為模板 通過自動化工具減少開發中重複 的書寫 新建一容器元件用於展示訊息列表，元件名為message 使用plop前 在專案的適當目錄下新建message index.js檔案，message index.less檔案。在message ind...

gulp前端自動化構建工具

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