gulp常用插件介绍

鉴于一开始研究gulp，最头疼的就是不知道纷繁复杂的gulp插件的作用，我觉得有必要写一篇wiki科普一下。
1.gulp-sass
安装方法：npm install gulp-sass --save-dev
作用：预编译 sass 文件为 css 文件
例子：
  'use strict';
 
  var gulp = require('gulp');
  var sass = require('gulp-sass');
 
  gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest('./css'));
  });
2.gulp-concat
安装方法：npm install gulp-concat --save-dev
作用:合并javascript文件，减少网络请求
例子：
  var gulp = require('gulp'),
      concat = require('gulp-concat');
 
  gulp.task('testConcat', function () {
      gulp.src('src/js/*.js')
          .pipe(concat('all.js'))//合并后的文件名
          .pipe(gulp.dest('dist/js'));
  });
3.gulp-clean-css
安装方法:npm install gulp-clean-css --save-dev
作用：压缩css文件，减小文件大小，并给引用url添加版本号避免缓存
例子：
  var gulp = require('gulp');
  var cleanCSS = require('gulp-clean-css');
 
  gulp.task('minify-css', function() {
    return gulp.src('styles/*.css')
      .pipe(cleanCSS({compatibility: 'ie8'}))  //兼容性
      .pipe(gulp.dest('dist'));
  });
4.gulp-less
安装方法：npm install gulp-less --save-dev
作用：将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。
例子：
  var gulp = require('gulp'),
      less = require('gulp-less');
 
  gulp.task('testLess', function () {
      gulp.src('src/less/index.less')
          .pipe(less())
          .pipe(gulp.dest('src/css'));
  });
5.gulp-autoprefixer
安装方法：npm install gulp-autoprefixer --save-dev
作用：根据设置浏览器版本自动处理浏览器前缀
例子：
  var gulp = require('gulp'),
      autoprefixer = require('gulp-autoprefixer');
 
  gulp.task('testAutoFx', function () {
      gulp.src('src/css/index.css')
          .pipe(autoprefixer({
              browsers: ['last 2 versions', 'Android >= 4.0'],  //主流浏览器的最新两个版本，安卓4.0以上
              cascade: true, //是否美化属性值 默认：true 像这样：
              //-webkit-transform: rotate(45deg);
              //        transform: rotate(45deg);
              remove:true //是否去掉不必要的前缀 默认：true 
          }))
          .pipe(gulp.dest('dist/css'));
  });
6.gulp-uglify
安装方法：npm install gulp-uglify --save-dev
作用：压缩javascript文件，减小文件大小
例子：
  var gulp = require('gulp'),
      uglify = require('gulp-uglify');
 
  gulp.task('jsmin', function () {
      gulp.src('src/js/index.js')
          .pipe(uglify())
          .pipe(gulp.dest('dist/js'));
  });
7.gulp-minify-html
安装方法：npm install gulp-minify-html --save-dev
作用：压缩html文件
例子：
  gulp.task('minify-html', function () {
      gulp.src('src/*.html') // 要压缩的html文件
      .pipe(minifyHtml())    //压缩
      .pipe(gulp.dest('dist/html'));
  });
8.gulp-rename
安装方法：npm install gulp-rename --save-dev
作用：重命名文件流中的文件
例子：
  var gulp = require('gulp'),
      rename = require('gulp-rename'),
 
  gulp.task('rename', function () {
      gulp.src('src/1.js')
      .pipe(rename('1.min.js')) //会将1.js重命名为1.min.js
      .pipe(gulp.dest('js'));
  });
9.gulp-jshint
安装方法：npm install gulp-jshint --save-dev
作用：检查js代码
例子：
  var gulp = require('gulp'),
      jshint = require("gulp-jshint");
 
  gulp.task('jsLint', function () {
      gulp.src('src/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter()); // 输出检查结果
  });
10.gulp-livereload
安装方法:npm install gulp-livereload --save-dev
作用：当代码变化时，它可以帮我们自动刷新页面
例子：
  var gulp = require('gulp'),
      less = require('gulp-less'),
      livereload = require('gulp-livereload');
  gulp.task('less', function() {
    gulp.src('less/*.less')
      .pipe(less())
      .pipe(gulp.dest('css'))
      .pipe(livereload());
  });
  gulp.task('watch', function() {
    livereload.listen(); //要在这里调用listen()方法
    gulp.watch('less/*.less', ['less']);
 });
11.browser-sync
安装方法：npm install browser-sync --save-dev
作用：也是用来自动刷新页面的
例子：具体方法见我另一篇博客,地址是：http://blog.csdn.net/han123xue/article/details/52689779
12.gulp-load-plugins
安装方法:npm install gulp-load-plugins
作用：自动帮你加载package.json文件里的gulp插件，并且不会一开始就加载全部的，而是当你使用哪个才加载哪个
例子：
  var gulp = require('gulp');
  var $ = require('gulp-load-plugins')();
  gulp.task('lint', function () {
    return gulp.src(jsFilePath)
      .pipe($.jshint())
      .pipe($.jshint.reporter('default'));
  });
好了，gulp插件还有很多，等着大家去探索，我暂且就介绍这么多。