Gulp常用插件整理
Posted 前端那些事
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Gulp常用插件整理相关的知识，希望对你有一定的参考价值。
1.gulp-autoprefixer
增加浏览器的私有前缀，让你不用再考虑为了写浏览器的兼容前缀而头疼。
安装：
npm install --save-dev gulp-autoprefixer配置任务：
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('autoprefixer', function () {
gulp.src('src/css/*.css')
.pipe(autoprefixer({
browsers: ['> 5%'],
cascade: true, //是否美化属性值 默认：true
remove:true //是否去掉不必要的前缀 默认：true
}))
.pipe(gulp.dest('dist/css'));
});更多浏览器的配置信息请查看
2.gulp-concat
合并js文件，可以合并多个js文件为一个文件，减少服务器请求。
安装：
npm install --save-dev gulp-concat配置任务：
var gulp = require('gulp');
var concat = reqiure('gulp-concat');
gulp.task('scripts', function() {
return gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/'));
});3.gulp-uglify
一款javascript代码优化工具，可以解析，压缩和美化javascript。
安装：
npm install --save-dev gulp-uglify配置任务：
var gulp = require('gulp');
var uglify = reuqire('gulp-uglify');
gulp.task('compress-js',function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/'));
});4.gulp-concat-css
css合并插件，合并多个css文件为一个文件，减少网页对服务器的请求数，提供网页响应速度。
安装：
npm install --save-dev gulp-concat-css配置任务：
var gulp = require('gulp-concat-css');
var concatCss = require('gulp-concat-css');
gulp.task('concat', function () {
return gulp.src('src/**/*.css')
.pipe(concatCss("all.css"))
.pipe(gulp.dest('dist/'));
});5.gulp-minify-css
压缩css文件，去除注释，空格。
安装：
npm install --save-dev gulp-minify-css配置任务：
var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
gulp.task('compress-css', function() {
gulp.src('src/css/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('dist/'));
});6.gulp-htmlmin
html文件压缩插件，去除不需要的注释，空格，属性。
安装：
npm install --save-dev gulp-htmlmin配置任务：
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin', function() {
gulp.src('src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist/'));
});7. gulp-imagemin
图片压缩插件，压缩gif、png、jpg、svg格式文件。
安装：
npm install --save-dev gulp-imagemin配置任务：
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
gulp.task('imagemin', function(){
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'));
});8.gulp-rename
文件改名插件，可以在需要改名的时候，修改文件的名字。
安装：
npm install --save-dev gulp-rename配置任务：
var glup = require('gulp');
var rename = require('rename');
gulp.task('imagemin', function(){
gulp.src('src/css/base.css')
.pipe(rename('main.css'))
.pipe(gulp.dest('src/css/'));
});9.gulp-jshint
检查javascript代码中的错误和潜在的问题。
安装：
npm install --save-dev gulp-jshint配置任务：
var gulp = require('gulp');
var jshint = require('gulp-jshint');
gulp.task('jshint',function(){
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter());
});10.gulp-csslint
检查css的语法错误。
安装：
npm install --save-dev gulp-csslint配置任务：
var gulp = require('gulp');
var csslint = require('gulp-csslint');
gulp.task('css', function() {
gulp.src('src/css/*.css')
.pipe(csslint())
.pipe(csslint.reporter());
});11.gulp-csscomb
格式化css代码，美化css代码，更容易阅读。
安装：
npm install --save-dev gulp-csscomb配置任务：
var gulp = require('gulp');
var csscomb = require('gulp-csscomb');
gulp.task('styles', function() {
gulp.src('src/css/main.css')
.pipe(csscomb())
.pipe(gulp.dest('dist/css'));
});12.gulp-load-plugins
插件按需加载插件，在一个项目中需要使用很多插件的时候，为了避免在gulpfile.js文件头引入过多的插件，造成代码的冗余，引用改插件，能够很好的解决这个问题。
安装：
npm install --save-dev gulp-load-plugins配置需要用到的插件，在package.json中配置
存在devDependencies的话可以不用配置
"dependencies": {
//下边为用到的插件
"gulp-jshint": "*",
"gulp-concat": "*"
}在任务中使用：
var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();或者
var plugins = require('gulp-load-plugins')();然后在使用的时候，下边的是相等的，
plugins.jshint = require('gulp-jshint');
plugins.concat = require('gulp-concat');因此，在使用的时候，我们可以直接通过左边的变量来代替右边的引用，每个插件都是惰性加载的，你不会注意到任何差异。
配置任务：
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
gulp.task('styles', function() {
gulp.src('src/styles/bootstrap.less')
.pipe($.less({strictMath: true}))
.pipe($.autoprefixer([
'android 2.3',
'Android >= 4',
'Chrome >= 20',
'Firefox >= 24', // Firefox 24 is the latest ESR
'Explorer >= 8',
'ios >= 6',
'Opera >= 12',
'Safari >= 6']))
.pipe($.csscomb())
.pipe(gulp.dest('./build/css'));
});了解更多配置信息
以上是关于Gulp常用插件整理的主要内容，如果未能解决你的问题，请参考以下文章