gulp常用插件及方法

常用的几个插件

gulp-uglify //（JS压缩）
gulp-minify-css //（CSS压缩）
gulp-minify-html    //（html压缩）
gulp-concat //（文件合并）
gulp-less   //（编译Less）
gulp-sass   //（编译Sass）
gulp-imagemin   //（压缩图片）
gulp-livereload //（自动刷新）
gulp-rename //(重命名)

方法

//gulpfile.js
//引入需要的插件
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    minify = require('gulp-minify-css'),
    htmlmini = require('gulp-minify-html'),
    concat = require("gulp-concat"),
    less = require("gulp-less"),
    sass = require("gulp-sass"),
    imagemin = require('gulp-imagemin'),
    livereload = require('gulp-livereload'),
    rename = require("gulp-rename");

建立任务

js压缩

gulp.task('minJs', function () {
    gulp.src(['js/*.js','!js/*.min.js'])  //获取文件，同时排除.min.js文件
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' })) //重命名 会在输出的文件名字后面加.min
        .pipe(gulp.dest('dest/js'));  //输出文件
});
//注：    ' ！' 为排除模式;

css压缩

gulp.task('cssMin', function () {
    gulp.src(['css/*.css', '!css/*.min.css'])  //要压缩的css
        .pipe(minify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dest/css'));
});

html压缩

gulp.task('htmlMin', function () {
    gulp.src('*.html')
        .pipe(htmlmini())
        .pipe(gulp.dest('minihtml'));
})

文件合并

gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合并的文件
    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest('dest/js'));
});
注：按顺序合并文件 gulp.src(['js/demo1.js','js/demo2.js','js/demo2.js'])；

less编译

gulp.task('lessTran', function () {
    gulp.src('less/*.less')
    .pipe(less())
    .pipe(rename('newindex.css'))//重命名
    .pipe(gulp.dest('dest/css'));
});

sass编译

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

压缩图片

 gulp.task('imgMin', function () {
    gulp.src('./img/*.{jpg,png,gif,ico}')
    .pipe(imagemin())
    .pipe(gulp.dest('./dest/img'))
});

监听

gulp.task('watch', function() {
  livereload.listen(); //调用listen()方法
  //监听目录下的文件。
  gulp.watch('js/*.js', ['jsMin']);
  gulp.watch('css/*.css', ['cssMin']); 
  //..................
});

gulp默认执行任务

gulp.task('default',[],function(){
     gulp.start('watch');
});

以上仅为一些简单常用的gulp任务