上一篇文章介绍了一些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
先写这些,以后再在补充一些用过的其他的