gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧。
- 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp:
npm install -g gulp
- 创建本地项目:
npm init
初始化的时候要求你输入一些值,不输的直接回车即可,点击y之后在根目录自动创建了一个package.json文件,这个文件用来存放即将安装的插件name和version,这个文件有什么用呢?当我们把项目拷贝给别人的时候不需要拷贝插件,只需要把项目文件、package.json和gulp.file.js拷贝过去就可以,接收人cd到项目文件目录直接输入npm install即可安装上我们拷贝前安装的各种插件。
- 设计项目目录索引结构
└── src/
├── less/ *.less 文件
├── sass/ *.scss *.sass 文件
├── css/ *.css 文件
├── js/ *.js 文件
├── fonts/ 字体文件
└── images/ 图片
└── dist/
- 安装各种插件
npm install gulp gulp-imagemin gulp-minify-css gulp-uglify gulp-util gulp-watch-path stream-combiner2 --save-dev
注意:这里只安装了部分插件
gulp——本地gulp
gulp-imagemin——图片压缩
gulp-minify-css ——css压缩
gulp-uglify ——js压缩
gulp-util ——控制台代码着色
gulp-watch-path ——文件很多时编辑那个哪个压缩,不会全部压缩(获取改变的文件的src和dest路径)
stream-combiner2——有些 gulp 任务编译出错会终止 gulp.watch,使用 gulp-watch-path 配合stream-combiner2 可避免这种情况
–save-dev这个命令是将安装的插件信息写入package.json文件内的“devDependencies”属性内,插件全部安装完之后package.json的变化为:
-
gulp如何使用
控制台输入gulp的时候首先找寻gulpfile.js文件,在找寻default任务,所以我们应该手动新建一个名为gulpfile.js的js文件,将任务写在里面。具体文件目录为:gulp一共五中方法: gulp.task()——新建任务 gulp.src()——获取文件源地址 gulp.dest()——文件输出地址 gulp.run()——运行任务 gulp.watch()——监听文件修改
-
编写gulpfile.js文件
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
minifycss = require('gulp-minify-css'),
imgmin = require('gulp-imagemin'),
gutil = require('gulp-util'),
watchPath = require('gulp-watch-path'),
combiner = require('stream-combiner2');
//新建代码着色与显示错误日志方法,这个方法用到了gulp-util和stream-combiner2插件
var handleError=function(err){
console.log('\n');
gutil.log('fileName: '+gutil.colors.red(err.fileName));
gutil.log('lineNumber: '+gutil.colors.red(err.lineNumber));
gutil.log('message: ' + err.message);
gutil.log('plugin: ' + gutil.colors.yellow(err.plugin));
};
//新建js批量压缩任务
gulp.task('script',function(){//script时自定义的
//将文件的源路径和发布路径赋值给相应变量
var srcJsPath='js/*.js';
var destJsPath='dist/js/';
var combined = combiner.obj([
gulp.src(srcJsPath),//获取文件源地址
uglify(),//执行压缩
gulp.dest(destJsPath);//将压缩的文件发布到新路径
]);
combined.on('error', handleError);//打印错误日志
});
/*这种写法需要css目录下有很多css文件,只要改变了一个点击保存的时候gulp会把所有css文件都会压缩一遍,为了提高性能我们可以利用gulp-watch-path插件只压缩/发布修改的文件*/
gulp.task('watchjs',function(){
gulp.watch('js/*.js',function(event){
var paths=watchPath(event,'js/','dist/js/');
//打印修改类型和路径
gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);
gutil.log('Dist: ' + paths.distPath);
//获取错误信息,继续执行代码
var combined = combiner.obj([
gulp.src(paths.srcPath),
uglify(),
gulp.dest(paths.distDir)
]);
combined.on('error', handleError);
});
});
/*编写default任务和监听任务*/
/*/新建批量任务还是监听修改任务根据项目中实际需要去写,等我们写好很多任务之后就需要写入default中,default写好之后只需要在dos窗口写入gulp就可以自动执行任务*/
gulp.task('default',function(){
//默认执行的方法,引号内的内容对应上面task写的内容
gulp.run('watchjs','css','images');
//监控js
gulp.watch('js/*.js',['watchjs']);
//监控css
gulp.watch('css/*.css',['css']);
//监控img
gulp.watch('images/*.*',['images']);
});
如对gulp还有什么不明白之处,或者本文有什么遗漏或错误,欢迎一起交流和探讨~