使用前提条件
gulp是基于Nodejs的自动任务运行器，gulp依赖于nodejs，因此，在使用gulp之前需要先安装nodejs。这里略过安装说明。
gulp安装步骤
- 全局安装
命令：npm install -g gulp
全局安装是方便你直接使用gulp命令，为了通过它执行gulp任务，比如gulp文件gulpfile.js中执行各种任务：
// 监听任务
gulp.task('watch', ['default'], () => {
gwatch(watch.static).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
gwatch(watch.style).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
gwatch(watch.scripts).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
gulp.watch([watch.static, watch.style, watch.scripts], ['default']).on('error', err => console.log(err))
})
- 本地项目新建package.json文件
命令行切换到当前项目文件夹。执行npm init,回车回车回车，生成package.json文件
注：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件。 - 本地项目安装gulp
本地项目安装gulp因为之后需要安装的gulp插件需要依赖gulp，所以总个过程安装两次。
本地项目执行命令： npm install gulp --save-dev - 项目中安装使用其它Gulp插件
安装我们需要gulp的插件，执行命令：npm install gulp-less gulp-watch gulp-concat gulp-minify-css --save-dev
npm install babel-core babel-preset-env gulp-babel gulp-rename gulp-sass gulp-sequence gulp-watch --save-dev
总结：安装完gulp等插件，package.json文件中：
{
"name": "pintuan",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "gulp watch"
},
"repository": {
"type": "git",
"url": "[email protected]:donghui/pintuan.git"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.1",
"gulp-concat": "^2.6.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.2.1",
"gulp-sequence": "^1.0.0",
"gulp-sourcemaps": "^2.6.4",
"gulp-watch": "^5.0.0"
}
}
- 新建gulpfile.js文件
在项目根目录下创建gulpfile.js文件，记住必须名字必须是gulpfile，gulpfile.js是gulp的配置文件，放于根目录中。
/*引入gulp及相关插件 require('node_modules里对应模块')*/
var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
//压缩
gulp.task('minify-css', function () {
gulp.src('css/*.css')
.pipe(minifyCss()) //执行编压缩功能
.pipe(gulp.dest('dist/css/')); //输出文件位置
});
//
gulp.task('script', function () {
gulp.src(['src/a.js',"src/b.js"])
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
//合并上面两个任务
gulp.task('default',['minify-css','script']);
gulp的任务API
主要API只有4个gulp.src()、gulp.dest()、gulp.task()、gulp.watch()。
- gulp.src()
获取目标文件：gulp.src(['static//.js', '!static/module/.js']) - gulp.dest()
gulp的工作流程是通过src()获取指定路径下的文件流，通过pipe()导到某些gulp插件中处理，完成后通过pipe()导到dest()中，最后写到指定的目录下。
var gulp = require('gulp');
gulp.src('script/jquery.js')
.pipe(gulp.dest('dist/foo.js'));//最终生成的文件路径为 dist/foo.js/jquery.js,而不是dist/foo.js
- gulp.task()
gulp.task()是用来定义任务的，内部使用的是Orchestrator，一个以最大并发排列和运行任务和依赖的模块。
gulp.task(name ，[deps] ，fn),参数说明：
name : 任务名称
deps: 依赖的任务，可以是多个。
fn：任务的内容
执行顺序：先执行依赖的任务，再执行当前的任务。
// 任务启动
gulp.task("default", function (cb) {
if (compareDelete('./dist', './src')) {
runSequence('static', 'style', 'scripts')(cb);
}
});
// 监听任务
gulp.task('watch', ['default'], () => {
gwatch(watch.static).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
gwatch(watch.style).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
gwatch(watch.scripts).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
gulp.watch([watch.static, watch.style, watch.scripts], ['default']).on('error', err => console.log(err))
})
- gulp.watch()
gulp.watch()是用来监听文件变化的，这样就可以在开发中实时监测文件的改动，然后自动做出相应的变化，比如压缩，其语法为:gulp.watch(glob ,[ opts], task)，参数说明：
glob：文件路径。
opts：是可配置参数，一般不用。
task：监听变化后要执行的任务，是一个数组。
gulp.task('uglify',function(){ //do something});
gulp.task('reload',function(){ //do something});
gulp.watch('js/**/*.js', ['uglify','reload']); //当js发生变化，执行压缩等任务。
// 任务启动
gulp.task("default", function (cb) {
if (compareDelete('./dist', './src')) {
runSequence('static', 'style', 'scripts')(cb);
}
});
// 监听任务
gulp.task('watch', ['default'], () => {
// 文件变化，先删除目标覆盖文件
gwatch(watch.static).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
gwatch(watch.style).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
gwatch(watch.scripts).on('unlink', unlinkfile).on('error', function (e) { console.log('file is deleted') });
//文件变化，执行拷贝动作
gulp.watch([watch.static, watch.style, watch.scripts], ['default']).on('error', err => console.log(err))
})
gulp.task('static', () => copyfile(watch.static))
gulp.task('style', () => styleBuild(watch.style))
gulp.task('scripts', () => scriptsBuild(watch.scripts))
// watch为总的执行任务。
注：gulp.pipe：可以理解为管道，将操作加入到加入到执行队列。
执行gulp命令
（1）执行命令： gulp 任务名：如上面：gulp watch
（2）在package.json文件scripts中定义：
"scripts": {
"build": "gulp watch"
}
然后执行：npm run build