gulp教程2：gulp常见插件

gulp常用插件

1. 复制文件

系统自带的api：
 gulp.src()  源文件路径  （需要传送文件的路径）
 gulp.dest() 目标路径--（传送到的文件夹）
 gulp.pipe()  管道，通道，表示下一步--流（送去哪里，像流程一样，一步步执行）

实例：复制文件

a. 把src的html复制到src目录下

gulp.task("copyhtml",function(){
    return gulp.src("src/html/index.html")
    .pipe(gulp.dest("src/"));    //gulp.dest 目标路径
    
});

b. 将所有的js复制到不存在的dist文件夹下
gulp.task("copyjs",function(){
    return gulp.src("src/js/*.js")  //使用*.js代表所有js文件 
    .pipe(gulp.dest("dist/js"));   //因为dist目录不存在，会自动创建文件夹dist
});

c. 排除.min.js再复制到不存在的dist文件夹下
gulp.task("copyexceptminjs",function(){
    return gulp.src(["src/js/*.js","!src/js/*.min.js"])
    .pipe(gulp.dest("dist/js"));
});

2. gulp-concat（文件合并）

npm install --save-dev gulp-concat

合并CSS与JS文件，减少http请求。

var gulp = require('gulp');
var concat3 = require("gulp-concat"); //concat3是一个函数名
gulp.task('concat2', function () {   //concat2是gulp执行的任务名。一般是gulp concat2
    return gulp.src('src/js/*.js') //要合并的文件
    .pipe(concat3('all.js')) // 合并匹配到的js文件并命名为 "all.js"。函数名concat3是自定义的函数名
    .pipe(gulp.dest('src/js'));
});

3. gulp-uglify （JS压缩）

gulp-uglify安装:

npm install --save-dev gulp-uglify

gulp-uglify用来压缩js文件，使用的是uglify引擎。

1	var gulp = require('gulp');  //加载gulp
2	var uglify = require('gulp-uglify');  //加载js压缩
3	 
4	// 定义一个任务 compass
5	gulp.task('compass', function () {
6	    gulp.src(['js/*.js','!js/*.min.js'])  //获取文件，同时过滤掉.min.js文件
7	        .pipe(uglify())
8	        .pipe(gulp.dest('javascript/'));  //输出文件
9	});

4. gulp-minify-css（CSS压缩）

gulp-minify-css安装：

npm install --save-dev gulp-minify-css

可以使用它来压缩CSS文件

1	var gulp = require('gulp');
2	var minify = require('gulp-minify-css');
3	 
4	gulp.task('cssmini', function () {
5	    gulp.src(['css/*.css', '!css/*.min.css'])  //要压缩的css
6	        .pipe(minify())
7	        .pipe(gulp.dest('buildcss/'));
8	});

5. gulp-minify-html（html压缩）

gulp-minify-html安装：

npm install --save-dev gulp-minify-html

可以使用它来压缩html文件.

1	var gulp = require('gulp');
2	var htmlmini = require('gulp-minify-html');
3	 
4	gulp.task('htmlmini', function () {
5	    gulp.src('*.html')
6	        .pipe(htmlmini())
7	        .pipe(gulp.dest('minihtml'));
8	})

6. gulp-imagemin（压缩图片）

gulp-imagemin安装：

npm install --save-dev gulp-imagemin

可以使用gulp-imagemin的插件来压缩jpg、png、gif等图片。

ar gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
 
gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant来压缩png图片
        }))
        .pipe(gulp.dest('dist'));
});

7. gulp-jshint（JS代码检查）

gulp-jshint安装：

npm install --save-dev gulp-jshint

可以用来检查JS的代码

1	var gulp = require('gulp');
2	var jshint = require("gulp-jshint");
3	 
4	gulp.task('jsLint', function () {
5	    gulp.src('js/*.js')
6	    .pipe(jshint())
7	    .pipe(jshint.reporter()); // 输出检查结果
8	});

8. gulp-rename(文件更名)

cnpm install gulp-rename --save-dev

功能描述{}
修改文件名，例如将demo.css修改为demo.min.css，一般配合gulp-minify-css/gulp-uglify压缩插件一起使用

与插件gulp-uglify组合使用，实现对JS文件压缩后更名为 xxx.min.js

var gulp = require('gulp'),
        minifyCss = require('gulp-uglify'),
        rename = require('gulp-rename'),
        pump = require('pump');

gulp.task('testRenameJs', function (cb) {
   pump([
         gulp.src('src/js/*.js'),
         rename({
             suffix: '.min'
         }),
         uglify(),
         gulp.dest('dist/js')
   ])
});

9. gulp-watch

npm install --save-dev gulp-watch

当监听src/js文件夹下 的js文件发生改变时，执行copyexceptminjs。退出用ctrl+c

const gulp = require("gulp");
    
gulp.task("copyexceptminjs", function () {
        return gulp.src(["src/js/*.js", "!src/js/all.js"])
                .pipe(rename("2.min.js"))
                .pipe(gulp.dest("src/js"));
});

gulp.task('watch', function () {
     //gulp.series不可少
     gulp.watch('src/js/*.js', gulp.series('copyexceptminjs'));

});