近期在學習使用gulp，通過寫這篇總結文章，讓自己加深對gulp常用插件的印象。

---

1. gulp-refresh

插件地址：gulp-refresh

注：1.該插件需要配合Chrome瀏覽器的擴展程序LiveReload使用。
????????2.測試文件需要在服務器上打開。
????????3.將LiveReload的空心圈點擊成實心圈。

插件作用：實現瀏覽器自動刷新。
使用方法：1.安裝gulp-refresh??2.安裝完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-refresh var gulp = require('gulp'),refresh = require('gulp-refresh'); gulp.task('refresh', function() {return gulp.src('app.html').pipe(refresh()); }); gulp.task('watch', function() {refresh.listen();gulp.watch('app.html', ['refresh']); });

3.運行gulp watch，執行任務(task):watch,監聽app.html文件。當文件保存時，執行任務(task)：refresh，重新加載app.html，瀏覽器通過LiveReload監聽，實現瀏覽器自動刷新。

---

2. gulp-htmlmin

插件地址：gulp-htmlmin

插件作用：壓縮html文件。
使用方法：1.安裝gulp-htmlmin??2.安裝完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-htmlmin var gulp = require('gulp'),htmlmin = require('gulp-htmlmin'); gulp.task('minify-html', function() {return gulp.src('app.html') // 源文件.pipe(htmlmin({collapseWhitespace: true})).pipe(gulp.dest('dist')); // 壓縮后的文件放到該路徑下 });

3.運行gulp minify-html，對文件進行壓縮。

4.壓縮后的路徑和文件

---

3. gulp-clean-css

插件地址：gulp-clean-css

插件作用：壓縮css文件。
使用方法：1.安裝gulp-clean-css??2.安裝完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-clean-css var gulp = require('gulp'),cleanCss = require('gulp-clean-css'); gulp.task('minify-css', function() {return gulp.src('css/*.css') // 選中css文件夾下的所有css文件.pipe(cleanCss({compatibility: true})).pipe(gulp.dest('dist/css')); // 壓縮后的文件放到該路徑下 });

3.運行gulp minify-css，對文件進行壓縮。

4.壓縮后的路徑和文件。

---

4. gulp-uglify

插件地址：gulp-uglify

插件作用：壓縮js文件。
使用方法：1.安裝gulp-uglify??2.安裝完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-uglify var gulp = require('gulp'),uglify = require('gulp-uglify'); gulp.task('minify-js', function() {return gulp.src('js/*.js') // 選中js文件夾下的所有js文件.pipe(uglify()).pipe(gulp.dest('dist/js')); // 壓縮后的文件放到該路徑下 });

3.運行gulp minify-js，對文件進行壓縮。

4.壓縮后的路徑和文件

---

5.gulp-rename

插件地址：gulp-rename

插件作用：重命名文件。
使用方法：1.安裝gulp-rename??2.安裝完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-rename var gulp = require('gulp'),rename = require('gulp-rename'); gulp.task('rename', function() {return gulp.src('app.text') // 選中要修改名字的文件.pipe(rename({dirname: 'text/rename', // 路徑名basename: 'filename', // 文件名（）prefix: 'prefix-', // 文件名前綴suffix: '-suffix', // 文件名后綴extname: '.md', // 文件擴展名})).pipe(gulp.dest('dist')); // 修改完成的文件放到該路徑下// 最終文件rename后路徑為： ./dist/text/rename/prefix-filename-suffix.md });

3.運行gulp-rename，重命名文件。

4.重命名后的文件名和路徑。

---

6.gulp-concat

插件地址：gulp-concat

插件作用：將多個文件合并為一個文件。
使用方法：1.安裝gulp-concat??2.安裝完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-concat var gulp = require('gulp'),concat = require('gulp-concat'); gulp.task('concat', function() {return gulp.src('js/*.js') // 選中js文件卡下的所有js文件.pipe(concat('all.js')) // 將選中的文件合并成一個文件 all.js.pipe(gulp.dest('dist')); // 將文件放到該路徑下 });

3.運行gulp-concat，合并文件。

4.合并后的文件

---

7.gulp-autoprefixer

插件地址：gulp-autoprefixer

插件作用：自動添加css瀏覽器前綴。
使用方法：1.安裝gulp-autoprefixer??2.安裝完成以后，在gulpfile.js文件中引用。

npm install --save-dev gulp-autoprefixer var gulp = require('gulp'),autoprefixer = require('gulp-autoprefixer'); gulp.task('autoprefix', function() {return gulp.src('css/*.css') // 選中css文件夾下的所有文件.pipe(autoprefixer({browsers: ['last 2 versions'],cascade: false})).pipe(gulp.dest('dist/css')); // 將文件放到該路徑下 });

3.運行gulp autoprefix

4.生成文件

---

綜合使用

這里將綜合使用多個插件，能更加理解gulp基于流的概念。

var gulp = require('gulp'),concat = require('gulp-concat'),sass = require('gulp-sass'),cleanCss = require('gulp-clean-css'),autoprefixer = require('gulp-autoprefixer'),rename = require('gulp-rename'); gulp.task('test', function() {gulp.src('sass/*.scss') // 選中sass文件夾下的所有scss文件.pipe(concat('all.scss')) // 合并成all.scss.pipe(sass().on('error', sass.logError)) // .scss => .css.pipe(autoprefixer({ // 添加瀏覽器前綴browsers: ['last 2 versions'],cascade: false})).pipe(cleanCss({ compatibility: 'ie8' })) // 壓縮css.pipe(rename({ suffix: '.min' })) // 重命名css all.css => all.min.css.pipe(gulp.dest('dist/css/')); // 保存到該目錄下 });

源文件。

運行gulp test，生成路徑和all.min.css 文件。

最后附上gulp插件倉庫的地址：gulp.js plugin registry
希望這篇文章對您有幫助，謝謝。
End!

總結

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

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