use-gulp 官網
編譯 sass
合併優化壓縮 css
校驗壓縮 js
優化新增檔案指紋（md5）
元件化頭部底部（include html）
實時自動重新整理…
gulp是前端開發過程中對**進行自動化構建的利器。它不僅能對資源進行優化，而且在開發過程中能夠通過配置自動完成很多重複的任務，讓我們可以專注於**，提高工作效率。
通過各種外掛程式, 配置任務task , 完成需要
全域性安裝
npm install gulp -g
區域性安裝
npm i -d gulp
這裡列舉比較常用的外掛程式:
比較特殊的
- gulp-load-plugins
var $ = require('gulp-load-plugins')(); $ 是乙個物件,載入了依賴裡的外掛程式 通過$.***使用外掛程式gulp外掛程式**
gulp.src( )
一般直接寫檔案路徑, 通過 * 萬用字元來通配全部檔案
gulp.dest(path[, options])
輸出到資料夾 , 資料夾不存在將會自動建立
gulp.task(name[, deps], fn)
核心 , 配置乙個任務 執行一連續的操作
name
任務的名字，如果你需要在命令列中執行你的某些任務，那麼，請不要在名字中使用空格。
deps
型別： array
乙個包含任務列表的陣列，這些任務會在你當前任務執行之前完成。
fn 該函式定義任務所要執行的一些操作。通常來說，它會是這種形式：gulp.src().pipe(someplugin())。
gulp.watch( )
gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb]
監視檔案，並且可以在檔案發生改動時候做一些事情。它總會返回乙個 eventemitter 來發射（emit） change 事件。
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) );
// 其他寫法
gulp.watch('js/**/*.js', function(event) );
在專案根路徑下 建立gulpfile.js 檔案
var gulp = require('gulp')
// less檔案編譯成css
var less = require('gulp-less')
gulp.task('lesstask', function
() )) // 重新命名
.pipe(less()) // 將less檔案編譯成css
.pipe(gulp.dest('dist/css')) // 輸出 將會在dist/css下生成index.css
});gulp.task('default',[ 'htmlmintask']); // 預設任務 , gulp 預設執行
如果在新增到預設任務中, 直接gulp執行
在task中 是否使用return來決定是非同步還是同步
const gulp = require('gulp');
// 沒有使用return
gulp.task('js',function () )
gulp.task('css',function () )
gulp.task('html',function () )
gulp.task('default', ['js', 'css', 'html']);
然後加上return
const gulp = require('gulp');
// 使用return
gulp.task('js', function
() )
gulp.task('css', function
() )
gulp.task('html', function
() )
gulp.task('default', ['js', 'css', 'html']);
結果顯然是非同步的
不想全部同步 , 但是個別任務是要同步順序執行 怎麼辦?
// less檔案轉化為css檔案
gulp.task('less', function
() );
// 新增前置任務 這樣less任務執行完 才會執行css任務
// 執行css任務 都是自動先執行完less任務
gulp.task('css', ['less'], function
() ))
.pipe($.cleancss())
.pipe(gulp.dest('dist/css/'))
});
怎麼可以少了 watch 和自動重新整理
自動重新整理的外掛程式是 gulp-livereload 本地伺服器可以用 gulp-webserver 或者 gulp-connect 都可以
這裡就演示用gulp-webserver和gulp-conncet
const gulp = require('gulp');
const $ = require('gulp-load-plugins')();
// 使用 open 自動開啟乙個**
});
這裡就不演示了
gulp前端自動化構建工具
gulp是基於node.js的乙個構建工具 自動任務執行器 開發者可以使用它自動化工作流程。一些常見的 重複的任務，例如 網頁自動重新整理 css預處理 檢測 壓縮 等，只需要簡單的命令就能全部完成。使用它可以簡化工作，提高開發效率。gulp優點 簡潔 gulp側重 優於配置 最直觀的感受，更為簡單...
2 1 8 Gulp自動化構建案例
在html中有時會引入一些css 或者js 檔案，這些檔案當我們打包完成之後就會出現檔案路徑不對應的情況。針對這個問題可以使用乙個 useref 的外掛程式，使用這個外掛程式可以自動地處理html中的構建注釋。按照這些構建注釋，useref 可以幫我們將檔案打包到指定的目錄中，並且在這個過程中還可以...
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...