當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Gulp 常用插件

發布時間：2024/4/17 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Gulp 常用插件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

插件使用注意事項：

插件需要先 npm/cnpm install xx --save-dev

gulp taskname，如果 task 已經設置成 default 的依賴，直接 gulp 即可

task 中的文件路徑都是相對 gulpfile.js 的

gulp.dest() 指向的目錄不存在，會被創建

task 中的 gulp.src 前記得加上 return（注意我下面的示例很多并沒有加）。為什么要加參考 Gulp 入門中「6. API 參考」src 一節

JS 壓縮、合并、重命名

let gulp = require('gulp'); let concat = require('gulp-concat'); // 合并 let uglify = require('gulp-uglify'); // 壓縮 let rename = require('gulp-rename'); // 重命名 let jshint = require('gulp-jshint'); // 注意需要同時安裝 jshintgulp.task('scripts', function() { // 這個任務的名稱是 scriptsgulp.src('src/js/*.js') // 將 src/js/ 目錄下的所有 js 文件合并.pipe(jshint()).pipe(jshint.reporter('default')).pipe(concat('all.js')) // 指定合并后的文件名為 all.js.pipe(gulp.dest('dist/js/')) // 保存合并后的文件.pipe(uglify()) // 壓縮// .pipe(rename('all.min.js')) // 重命名.pipe(rename({suffix: '.min'})) // 和上一行等效.pipe(gulp.dest('dist/js/')); });

Sass 編譯

let gulp = require('gulp'); let sass = require('gulp-sass'); // sass -> css let prefixer = require('gulp-autoprefixer'); // 增加前綴 let minify = require('gulp-minify-css'); // css 壓縮 let notify = require('gulp-notify'); // 打印提醒語句 let concat = require('gulp-concat'); // 合并// 編譯Sass gulp.task('css', function() { // 任務名gulp.src('sass/*.scss') // 目標 sass 文件.pipe(sass()) // sass -> css.pipe(prefixer('last 2 versions')) // 參數配置參考 <https://github.com/ai/browserslist>.pipe(minify()) // 壓縮.pipe(gulp.dest('css')) // 目標目錄.pipe(notify({message: 'done'})).pipe(concat('all.min.css')) // 合并.pipe(gulp.dest('css')); // 目標目錄 });

圖片壓縮

let gulp = require('gulp'); let imagemin = require('gulp-imagemin'); let cache = require('gulp-cache'); // 減少重復壓縮gulp.task('images', function() {gulp.src('src/images/*').pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))).pipe(gulp.dest('dist/images/')); });

監控文件

gulp.task('watch', function() { // 指定任務名為 watch// 監控 a.scss 文件，如果有修改，則執行 sass 任務gulp.watch('src/sass/a.scss', ['sass']); });

注意先要用 gulp watch 開啟監聽，或者直接將 watch 任務設置為 default 的依賴

刪除文件

let gulp = require('gulp'); let clean = require('gulp-clean');gulp.task('clean', function() {return gulp.src(['dist/js/*', 'dist/sass/*', 'dist/images/*'], {read: false}).pipe(clean()); });

gulp-load-plugins 模塊

如果引入的插件很多，可以嘗試用 gulp-load-plugins 模塊，它會將 package.json 中的依賴全部引入。

熱重載

使用 broswer-sync 模塊。

目錄結構如下（src 中的 a.scss 編譯成 dist 中的 a.css）：

distsassa.cssindex.html srcsassa.scss

其中，index.html 引用了 a.css，我們希望在修改 a.scss 的時候，及時編譯 sass 文件，然后 index.html 能夠在瀏覽器中重新載入。

配置不是很難，參考官方文檔 https://browsersync.io/docs/gulp（中文文檔在這里）。但是被一個問題困擾了半天，瀏覽器打死不重載，但是在 CLI 中已經提示 "Reloading Browsers..."，最后在其 GitHub 的某個 issue 中找到了答案，原來我的 HTML 文件沒有寫 body 標簽，于是 broswer-sync 無法注入某段 js 文件。后來查到官方文檔也有說明。

Browsersync works by injecting an asynchronous script tag (<script async>...</script>) right after the <body> tag during initial request. In order for this to work properly the <body> tag must be present. Alternatively you can provide a custom rule for the snippet using snippetOptions

臥槽這是逼我以后寫 demo 寫完整標簽啊 ... 慘痛的教訓

學會了熱重載，明天可以學下 sass 語法了，修改一次 ctrl+r 還真是蛋疼 ... 其實用 vue 的 webpack 模板也能搞熱重載 ...

(2017.05.22 add) 有的時候，我們寫個 demo 想跑一下，需求很簡單，只要能啟個本地服務以及支持修改刷新即可（如果只是想啟個本地服務，用 python 或者 http-server 模塊更簡便）。我們可以在文件夾下新建三個文件，分別是 index.html（demo 頁）、gulpfile.js 和 package.json，其中，gulpfile.js 內容如下：

package.json 文件如下：

{"devDependencies": {"browser-sync": "^2.11.1","gulp": "^3.9.1"} }

npm i 后用 gulp 開啟服務即可。

ES6 -> ES5

安裝插件：

npm install gulp-babel babel-preset-es2015 --save-dev let gulp = require('gulp'); let babel = require('gulp-babel');gulp.task('scripts', function() {gulp.src('src/js/a.js').pipe(babel({ // es6 -> es5presets: ['es2015']})).pipe(gulp.dest('dist/js/')) });

gulp-plumber

默認在執行任務時，如果出錯，就會掛起，要重新啟動需要重新輸入 gulp 命令，這時我們可以用 gulp-plumber 插件。

比如我們實時編譯 sass 時：

// sass -> css gulp.task('css', function() { // 任務名// 帶了 returnreturn gulp.src('a.scss') // 目標 sass 文件// .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})).pipe(plumber({ // 編譯出錯時控制臺打印錯誤，pipe 流不掛起errorHandler: function(error) {console.log(error.message);// 參考 http://frontendgods.com/handling-errors-when-working-with-sass-watch-plumber-and-gulp/this.emit("end"); // 多了這一句}})).pipe(sass()) // sass -> css.pipe(gulp.dest('')) // 目標目錄// .pipe(reload({stream: true})).pipe(browserSync.stream()); // broswer reload });

或者這樣，不帶 return，并且在屏幕右下角增加彈窗：

// sass -> css gulp.task('css', function() { // 任務名gulp.src('a.scss') // 目標 sass 文件.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})).pipe(sass()) // sass -> css.pipe(gulp.dest('')) // 目標目錄// .pipe(reload({stream: true})).pipe(browserSync.stream()); // broswer reload });

最后推薦一篇寫的很用心的文章 Gulp 新手入門教程（譯文）

總結

以上是生活随笔為你收集整理的Gulp 常用插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。