来精通下gulp常用插件
精通gulp常用插件
gulp是个啥
gulp是一种前端构建工具,可以增强我们的工作流程
相关网站: Gulp中文官网 —- Gulp入门指南 —- Gulp英文官网 —- npm-gulp
安装
除了gulp还有哪些选择
1.Webpack
2.Grunt
到哪儿去找最好用的gulp插件
1.gulp-plugins搜索
列表中的每个插件都有归类的标签,可以点相关标签去查看相近的插件有哪些
2.npm插件搜索
输入gulp,即可列出所有包名带gulp的插件,还可以从最佳,受欢迎程度,代码质量,维护等几个纬度对搜索结果进行排名
3.别人的team总结的资源
这个team总结的常用的gulp插件比较详细,每一个都有github的连接.还列有gulp相关的视频资源连接
我常用的gulp
css
- gulp-autoprefixer
- gulp-less
- gulp-csso
- gulp-uncss
- gulp-cssmin
js
- gulp-babel （搭配安装 babel-core,babel-preset-es2015）
- gulp-uglify
- html
- gulp-ejs
- gulp-useref
- gulp-html-replace
- gulp-rev
- gulp-rev-replace
- image
- imagemin
file
- gulp-header
- gulp-concat
- gulp-ext-replace
- gulp-clean
server
- connect
- 其他
- gulp-if
- gulp-util
平时定义好gulpfile.js文件后基本就不变的,常会变的是项目的路径,所以这里我会定义一个项目的路径.
如果要给项目单独配置gulpfile.js文件,更改basepath也很方便
var gulp = require('gulp'), /*载入gulp模块*/
projectPath = "task1", /*定义项目名*/
basePath = 'project/' + projectPath + '/'; /*定义基本路径*/
名字:gulp-header
描述:给文件头部添加信息
snippet:
var header = require('gulp-header'); /*载入gulp-header模块*/
var pkg = require("./package.json"); /*获取json文件*/
var banner =
"/** \n\
* " + pkg.name + " V" + pkg.version + " \n\
* By 小珍\n\
*/\n";名字:gulp-less
描述: gulp插件 less预编译
snippet:
var less = require('gulp-less');
var autoprefixer = require('gulp-autoprefixer'); /*添加浏览器前缀插件*/
gulp.task('less', function() {
return gulp.src([basePath + 'src/css/*.less']) /*匹配任务文件*/
.pipe(less()) /*less编译*/
.pipe(autoprefixer()) /*添加浏览器前缀*/
.pipe(header(banner)) /*添加文件头*/
.pipe(gulp.dest(basePath + 'src/css/')); /*保存任务结果*/
});名字:gulp-csso
描述: csso 优化，合并可合并的css
snippet:
var csso = require('gulp-csso');
gulp.task('csso', function() {
return gulp.src(basePath + 'dist/css/*.css')
.pipe(csso())
.pipe(gulp.dest(basePath + 'dist/css/'))
});
名字:gulp-uncss
描述: gulp插件去除css文件中的 未用到的css
snippet:
var uncss = require('gulp-uncss');
gulp.task('uncss', ["csso", "cssmin"], function() {
gulp.src(basePath + 'dist/css/*.css')
.pipe(uncss({
html: [basePath + 'dist/*.html'] /*这里是项目所有的html目录*/
}))
.pipe(gulp.dest(basePath + 'dist/uncss'));
})名字:gulp-cssmin
描述: css压缩
snippet:
var cssmin = require('gulp-cssmin');
var ext_replace = require('gulp-ext-replace'); /*文件扩展名替换插件*/
gulp.task('cssmin', ["less"], function() {/*先执行less任务,再执行cssmin任务*/
gulp.src([basePath + 'dist/css/*.css',
'!' + basePath + 'dist/css/*.min.css'])
.pipe(cssmin())
.pipe(header(banner))
.pipe(ext_replace('.min.css'))
.pipe(gulp.dest(basePath + 'src/css/'));
});
名字:gulp-babel
描述: babel 将es6编译成es5
snippet:
var babel = require('gulp-babel');
gulp.task('babel',function(){
return gulp.src(basePath + 'src/js/*.js')
.pipe(babel({
presets:['es2015']
}))
.pipe(gulp.dest(basePath+'dist/js/'));
})名字:gulp-uglify
描述: js混淆压缩
snippet:
var uglify = require('gulp-uglify');
var ext_replace = require('gulp-ext-replace'); /*文件扩展名替换插件*/
gulp.task('uglify', function() {
return gulp.src([basePath + 'dist/js/*.js', '!' + basePath + 'dist/js/*.min.js'])
.pipe(uglify({
preserveComments: "license"
}))
.pipe(ext_replace('.min.js'))
.pipe(gulp.dest(basePath + 'dist/js'));
});名字:gulp-if
描述:控制流 有条件地运行一个任务。
snippet:
var gulpif = require('gulp-if');
var concat = require('gulp-concat'); /*合并文件减少网络请求*/
var condition = true; /*判断条件*/
gulp.task('gulpif', function() {
gulp.src(basePath + 'dist/js/*.js')
.pipe(gulpif(condition,uglify(),concat('all.js')))
/* condition为true时执行uglify(), else 执行concat('all.js')*/
.pipe(gulp.dest(basePath + "dist/js/"));
});名字:gulp-util
描述:一个实用工具，当初为了知道为何js压缩失败而找到这个工具用来打印错误日志。
snippet:
var gutil = require('gulp-util');
gulp.task('*****', function() {
gulp.src('*****')
.pipe('***某个插件任务**') /*这个任务可能错误,下面监听错误*/
.on('error', function(err) {
gutil.log(gutil.colors.red('[Error]'), err.toString());
/*字符[Error]设置为了红色,后面追加打印错误日志*/
})
.pipe(gulp.dest('*****'));
});名字:gulp-imagemin
描述: imagemin 图片压缩
snippet:
var imagemin = require('gulp-imagemin');
gulp.task('imagemin', function() {
gulp.src(basePath + 'src/images/*.{png,jpg,gif,ico}')
.pipe(imagemin({
optimizationLevel: 3, //类型：Number默认：3取值范围：0-7（优化等级）
progressive: false, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
}))
.pipe(gulp.dest(basePath + 'dist/images/'));
});
名字:gulp-ejs
描述:合并html模板 批量生成演示的html文档的时候很有用
snippet:
var ejs = require("gulp-ejs");
gulp.task('ejs', function() {
return gulp.src([basePath + 'src/*.html',
"!" + basePath + "./src/_*.html"])
.pipe(ejs({}))
.pipe(gulp.dest(basePath + "dist/"));
});
<html>
<head>
<title>ejstitle>
head>
<body>
<% include _header.html %>
body>
html>
<header>
这里是公共头部
header>名字:gulp-useref
描述:解析HTML文件中的构建块,对html页面中的js，css引用进行合并.
作用:src中的html文件中引用多个样式文件,通过构建工具的文件合并多个文件为*all.css. 新的html文件里就自动删除以前的多个样式文件的引用,重新引用*all.css文件
snippet:
var useref = require('gulp-useref');
gulp.task('useref', function() {
gulp.src(basePath + 'src/*.html')
.pipe(useref())
.pipe(gulp.dest(basePath + "dist/"))
});构建块的语法:
... HTML Markup, list of script / link tags.
<type>:三种类型,js,css,remove ;remove将移除构建块中的内容
<html>
<head>
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
head>
<body>
<script type="text/javascript" src="scripts/one.js">script>
<script type="text/javascript" src="scripts/two.js">script>
body>
html>
<html>
<head>
<link rel="stylesheet" href="css/combined.css"/>
head>
<body>
<script src="scripts/combined.js">script>
body>
html>名字:gulp-html-replace
描述:替换html中的构建块 与useref类似，但可以将重命名写在任务配置里
snippet:
var htmlreplace = require('gulp-html-replace');
gulp.task('htmlreplace', function() {
gulp.src(basePath + 'src/*.html')
.pipe(htmlreplace({
'cssbuild': 'styles.min.css',
'jsbuild': 'js/bundle.min.js'
/* cssbuild是index.html中定义的buildName*/
}))
.pipe(gulp.dest(basePath + "dist/"))
});构建块的语法:
Everything here will be replaced
<html>
<head>
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
head>
<body>
<script type="text/javascript" src="scripts/one.js">script>
<script type="text/javascript" src="scripts/two.js">script>
body>
html>名字:gulp-rev
描述:给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css
snippet:
var rev = require('gulp-rev');
gulp.task('rev', function() {
gulp.src(basePath + 'dist/css/*.css')
.pipe(rev())
.pipe(gulp.dest(basePath + "dist/css/"))
});名字:gulp-rev-replace
描述:重写html中被gulp-rev重命名的文件名
snippet:
var revReplace = require('gulp-rev-replace');
gulp.task('revreplace', function() {
gulp.src(basePath + 'src/*.html')
.pipe(useref()) // 替换HTML中引用的css和js
.pipe(rev()) // 给css,js,html加上hash版本号
.pipe(revReplace()) // 把引用的css和js替换成有版本号的名字
.pipe(gulp.dest(basePath + "dist/"))
});名字:gulp-connect
描述: connect 本地服务器
snippet:
var connect = require("gulp-connect");
gulp.task('server', function() {
connect.server({
root: './' + basePath + 'dist/',
livereload: true
});
});/*html文件重新加载*/
gulp.task('htmlreload', function() {
gulp.src(basePath + 'dist/*.html')
.pipe(connect.reload());
});gulp watch
描述: gulp 观察,定义哪些文件发生变化时,执行哪些gulp任务
snippet:
gulp.task('watch', function() {
gulp.watch(basePath + 'src/css/*.less', ['less','html']);
gulp.watch(basePath + 'src/*.html', ['ejs',,'html']);
});gulp task
描述: gulp 任务,定义gulp任务名和任务流
snippet:
gulp.task("default", ['watch', 'server']);
gulp.task("build", ['ejs', 'imagemin', 'uglify', 'uncss']);