gulp插件

js文件压缩

gulp-uglify

var gulp = require('gulp'),
    uglify = require("gulp-uglify");

gulp.task('minify-js', function () {
    gulp.src('') // 要压缩的js文件
    .pipe(uglify())  //使用uglify进行压缩,更多配置请参考：
    .pipe(gulp.dest('')); //压缩后的路径
});

css文件压缩

gulp-clean-css

var gulp = require('gulp'),
    minifyCss = require("gulp-clean-css");

gulp.task('minify-css', function () {
    gulp.src('') // 要压缩的css文件
    .pipe(cleanCss()) //压缩css
    .pipe(gulp.dest(''));
});

文件合并

gulp-concat

var gulp = require('gulp'),
    concat = require("gulp-concat");

gulp.task('concat', function () {
    gulp.src('')  //要合并的文件
    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest(''));
});

less和sass的编译

gulp-less

var gulp = require('gulp'),
    less = require("gulp-less");

gulp.task('compile-less', function () {
    gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist/css'));
});

var gulp = require('gulp'),
    sass = require("gulp-sass");

gulp.task('compile-sass', function () {
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

自动启动一个web服务器，且实现热加载的功能

gulp-connect

//启动服务器
var gulp = require('gulp'),
  connect = require('gulp-connect');

gulp.task('connect', function() {
  connect.server({
    root: 'app',
    port: 8000,
    livereload: true
  });
});
gulp.task('default', ['connect']);

//自动刷新html
var gulp = require('gulp'),
  connect = require('gulp-connect');

gulp.task('html', function () {
  gulp.src('./app/*.html')
    .pipe(connect.reload());  //自动刷新
});

gulp.task('watch', function () {
  gulp.watch(['./app/*.html'], ['html']);
});

gulp.task('default', ['connect', 'watch']);

根据设置浏览器版本自动处理浏览器前缀

gulp-autoprefixer

var gulp = require('gulp'),
  connect = require('gulp-autoprefixer');

gulp.task('less',function(){
    gulp.src(['my/less/index.less'])
        .pipe( less() )
        .pipe(autoprefixer({
            browsers: ['last 20 versions','last 2 Explorer versions','last 3 Safari versions','Firefox >= 20'],
            cascade: true
        }))
        .pipe( gulp.dest('dev/css/'));
});

删除

当css，img，js出现删除操作的时候，虽然watch会监听，但是并不会删除相应文件

gulp-clean

var gulp = require('gulp'),
  connect = require('gulp-clean');

gulp.task('clean',function(){
    gulp.src('dev/*')
        .pipe(clean());
});

基本任务

gulp.task('scripts', function() {
    return gulp.src('./src/**/*.js')
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('build/'));
});