gulp常用插件总结

近期在学习使用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常用插件总结的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。