上周腾讯TGideas团队来公司分享了一个gulp前端构建利器,自个儿玩了一下,于是有了此文。

号称新一代前端构建利器的gulp是基于流的,代码优于配置的构建工具。虽然已经熟悉用grunt来配置构建,但用了gulp之后感觉这个gulp似乎更胜一筹。

关于如何全局安装gulp,该项目官网已经有详细的介绍,这里不多赘述,直接进入主题。

利用npm创建package.json文件

如果对package.json文件已经比较熟悉了,那就没有必要利用这个”引导式”的方式创建package.json,这里是针对”懒人”(比如我…)比较好的方式。切换到项目根目录下面,在终端敲入下面代码:

npm init

接下来只需按照提示一步步填写,一分钟不到就搞定了。

安装所需的插件并且自动写入package.json文件

npm官网或者到gulp的插件官网可以查询你所需要的插件关键词,假设输入imagemin,可以看到下载量最多并且属于gulp的一般就是你想要的那个了,然后在终端敲入以下代码下载插件并且自动保存到package.json文件的devDependencies里面去,避免自己手动输入。

npm install --save-dev gulp-imagemin

如果mac或者linux系统的可能会提示权限不足,暴力一点sudo解决。

创建gulpfile.js文件

这个是gulp的核心配置文件,配置模式也很简单,基本是下面这种模式

gulp.task('任务名称', function () {
return gulp.src('任务路径')
.pipe()
.pipe()
...
.dest()
});

简单的gulpfile.js例子

这里给了自己写的一个简单gulpfile.js的配置,项目结构如下:

root
css
images
xxx.png
yyy.png
...
xxx.css
yyy.css
...
html
xxx.html
yyy.html
...
images
xxx.png
yyy.jpg
...
js
xxx.js
yyy.js
lib
jquery.js
jquery.xxx.js

gulpfile.js内容如下(项目结构如果不一样,只需修改配置路径以及输出路径即可):

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var stylish = require('jshint-stylish');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
//统一配置路径
var path = {
scriptLint : './js/*.js',
scriptUglify : './js/**/*.js',
styles : './css/*.css',
cssImage : './css/images/*',
images : './images/*'
};
//统一配置输出路径
var dest = {
js : './dist/js',
css : './dist/css',
cssImage : './dist/css/images',
images : './dist/images',
html : './dist/html'
};
//全自动执行任务
gulp.task('build', function () {
gulp.run('lint', 'uglify', 'imagemin', 'css', 'css-imagemin');
});
//js语法检查
gulp.task('lint', function () {
return gulp.src(path.scriptLint)
.pipe(jshint())
.pipe(jshint.reporter(stylish))
.pipe(jshint.reporter('fail')) //若语法错误过多,自动抛错处理
});
//js压缩输出到指定文件夹,若需合并再压缩参考下面css合并压缩任务
gulp.task('uglify', function () {
gulp.src(path.scriptUglify)
.pipe(uglify())
.pipe(gulp.dest(dest.js))
});
//image压缩输出到指定文件夹
gulp.task('imagemin', function () {
return gulp.src(path.cssImage)
.pipe(imagemin({
progessive : true,
svgoPlugins : [{removeViewBox : false}],
use : [pngquant()]
}))
.pipe(gulp.dest(dest.images))
});
//合并压缩css到指定文件夹
gulp.task('css', function () {
gulp.src(path.styles)
.pipe(concat('style.css'))
.pipe(gulp.dest(dest.css))
.pipe(rename('style.min.css'))
.pipe(minifyCSS({
keepBreaks : true //是否保持换行,默认为false
}))
.pipe(gulp.dest(dest.css))
});
//css目录下面的images压缩输出到指定文件夹
gulp.task('css-imagemin', function () {
return gulp.src(path.images)
.pipe(imagemin({
progessive : true,
svgoPlugins : [{removeViewBox : false}],
use : [pngquant()]
}))
.pipe(gulp.dest(dest.cssImage))
});

运行

在根目录下面敲入下面代码,一次执行全自动化流程:

gulp build

当然你也可以单独执行某个任务:

gulp imagemin

写在最后

例子中的gulpfile.js只是一个最简单的demo,没有加入watch文件监听功能,其它额外的功能也没有,具体所需什么功能可以到npm官网进行查询,总之“授之以鱼,不如授之予渔”。