gulp常用插件

由于npm是国外的服务器，速度比较慢，所以我们使用淘宝镜像进行下载。

npm install -g cnpm --registry=https://registry.npm.taobao.org

常用插件#

var gulp        = require('gulp');  //gulp
var $ = require('gulp-load-plugins')();//一个查件集合
var browserSync = require('browser-sync').create(); //热加载
var reload      = browserSync.reload;
var concat    = require('gulp-concat');  // 合并
var uglify = require('gulp-uglify');  //js压缩
var cssmin = require('gulp-minify-css');//css压缩
var rename = require('gulp-rename');//重命名
var less = require('gulp-less');    //less转css
var sass = require('gulp-sass');  // sass -> css
var prefixer = require('gulp-autoprefixer');  // 增加前缀
var notify = require('gulp-notify');  // 打印提醒语句

1.复制文件##

gulp.task('copy-html',function(){
    return gulp.src('./index.html').pipe(gulp.dest('dist'));
});

2.js,css合并文件##

//需要插件
var concat    = require('gulp-concat'); 
//js合并
gulp.task('concatjs',function(){
    return gulp.src(["./js/*.js"])//指定要合并的文件glob
        .pipe($.concat('app.js'))//进行合并并指定合并后的文件名
        .pipe(gulp.dest('dist/js'));//输出到目标路径
});
//css合并
gulp.task('concatcss',function(){
    gulp.src('./css/*.css')
        .pipe(concat('index.css'))
        .pipe(gulp.dest('./dest/css'));
})

3.js,css改变名字##

//需要插件
var rename = require('gulp-rename');
//css换名
gulp.task('renamecss',function(){
    gulp.src('./css/*.css')
        .pipe(concat('index.css'))
        //.pipe(rename({suffix: '.min'}))  与下句话一个意思
        .pipe(rename('index.min.css'))
        .pipe(gulp.dest('./dest/css'));
})

//js换名
gulp.task('renamejs',function(){
    gulp.src('./js/*.js')
        .pipe(concat('index.js'))
        //.pipe(rename({suffix: '.min'}))  与下句话一个意思
        .pipe(rename('index.min.js'))
        .pipe(gulp.dest('./dest/js'));
})

4.js,css压缩文件##

//需要插件
var uglify = require('gulp-uglify');
var cssmin = require('gulp-minify-css');
//css压缩
gulp.task('mincss', function () {
    gulp.src('src/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'));
});
//js压缩
gulp.task('minjs',function(){
    gulp.src('./js/*.js')
        .pipe(concat('inddasex1.js'))
        .pipe(gulp.dest('./dest/js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('./dest/js'));
})

4.less转css

//需要查件
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.sass转css

var  gulp = require('gulp');
var sass = require('gulp-sass');  // sass -> css
var prefixer = require('gulp-autoprefixer');  // 增加前缀
var minify = require('gulp-minify-css');  // css 压缩
var notify = require('gulp-notify');  // 打印提醒语句
var concat = require('gulp-concat');  // 合并

// 编译Sass
gulp.task('css', function() {  // 任务名
  gulp.src('sass/*.scss')  // 目标 sass 文件
    .pipe(sass())  // sass -> css
    .pipe(minify())  // 压缩
    .pipe(gulp.dest('css'))  // 目标目录
    .pipe(notify({message: 'done'}))
    .pipe(concat('all.min.css'))  // 合并
    .pipe(gulp.dest('css'));  // 目标目录
});

7.热加载（browser-sync）

var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;
gulp.task('serve', function() {
    browserSync.init({
        server: "./"
    });
    gulp.watch("./js/*.js").on('change', reload);
    gulp.watch("*.html").on('change', reload);
});