gulp自动化脚本 · Web前端爱好者
关于如何全局安装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 |
