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/'));
});