Gulp常用插件实践

上一篇文章介绍了一些Gulp一些基本操作，但平时开发时，那些基本的操作是无法满足我们的需求的，我们很多功能需要gulp插件来实现。进来就来写下平时用到的gulp插件。可以去npm搜索以下插件

首先是js和css有关的插件啦
gulp-cssmin压缩css文件，gulp-less处理less文件，其他预处理也有相对应的插件，gulp-uglify压缩js文件
下面演示一下插件的使用

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');

gulp.task('cssmin', function() {
    gulp.src('A/a.css')
        .pipe(cssmin())
        .pipe(gulp.dest('B'))
})

这段代码很简单就是创建cssmin任务，文件入口是a.css出口时B文件夹，中间调用了cssmin方法，
执行gulp cssmin的结果就是最后在B文件夹下会自动产生一个a.css并且里面的css已经压缩

//A/a.css下的
.text {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}
// B/a.css下的
.text{text-align:center;font-size:16px;font-weight:700}

下面再看下js压缩

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

gulp.task('jsmin', function() {
    gulp.src('A/a.js')
        .pipe(uglify())
        .pipe(gulp.dest('B'))
})

代码就不细说了很简单直接看结果

function Person(name,age) {
    this.name = name;
    this.age = age;
}
压缩后的
function Person(n,e){this.name=n,this.age=e}

当然我们可以使用ES6语法，那么我们就需要引入一些babel的gulp插件

npm install --save-dev gulp-babel babel-preset-[env] babel-core

要安装三个注意了，一个是gulp的babel插件还有一个是环境[env]可选项有很多下面贴上地址，我们用的是es2015 因为我们要转译成2015 最后一个是babel本身的核心包

环境地址https://babeljs.io/docs/plugins/#presets

var babel = require('gulp-babel');

gulp.task('babel', () =>
    gulp.src('A/a.js')
        .pipe(babel({
            presets: ['es2015']//这里就是我们下载的环境
        }))
        .pipe(gulp.dest('B'))
);

看一下结果，这里用了ES6 class语法

class Person {
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
}
编译后
"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Person = function Person(name, age) {
    _classCallCheck(this, Person);

    this.name = name;
    this.age = age;
};

接下来再介绍一些零零碎碎用的常用插件
livereload（浏览器自动刷新）功能的插件gulp-livereload和gulp-connect，这里介绍下gulp-connect

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

gulp.task('connect', function() {
  connect.server({
    root: 'A',
    livereload: true,
    port: 1234
  });
  gulp.watch(['A/*.html'], ['html']);
}); 


gulp.task('html', function() {
  gulp.src('A/a.html')
    .pipe(gulp.dest('B'))
    .pipe(connect.reload());
});

图片压缩插件gulp-imagemin这个很简单就不写代码了
贴上网址大家自己看看就行https://www.npmjs.com/package/gulp-imagemin

文件合并插件 gulp-concat https://www.npmjs.com/package/gulp-concat

gulp.task('concat', function() {
  return gulp.src('A/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('B'));
});

剩下的就不一一举例子了
gulp-plumber 处理gulp错误的，https://www.npmjs.com/package/gulp-plumber
gulp-clean 用来清除的 https://www.npmjs.com/package/gulp-clean
gulp-rename 用来重命名 https://www.npmjs.com/package/gulp-rename
gulp-if 可以在gulp写一些逻辑 https://www.npmjs.com/package/gulp-if

先写这些，以后再在补充一些用过的其他的

猜你喜欢