Gulp 是什么？
Automate and enhance your workflow
为什么要前端构建？
修改预处理样式后自动编译（less，sass）：gulp-less ，gulp-sass
监听文件变化：gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])；
自动刷新浏览器：gulp-connect
文件合并：gulp-concat
Gulp和webpack 区别?
gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作;
webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案;
Gulp实践
构建项目
npm install gulp -g
mkdir gulpTest && cd gulpTest
npm install gulp --save
npm init
touch gulpfile.js
vim gulpfile.js
全局安装gulp和本地安装gulp两次的原因？
全局安装gulp是为了执行gulp任务，本地安装gulp是为了调用gulp插件的功能。
gulpfile.js配置
var gulp =require("gulp");//创建 gulp模块
var less = require('gulp-less'); //创建编译less模块
var connect = require('gulp-connect'); //创建 自动刷新浏览器模块
npm install --save gulp-less gulp-connect
目录结构：
└── src/ 源码目录
├── less/ .less 文件
├── css/ .css 文件
├── js/ .js 文件
├── index.html 入口文件
└── package.json
└── gulpfile.js
package.json配置
{
"name": "gulp-test",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-less": "^3.3.2",
"gulp-livereload": "^3.8.1"
}
}
Gulp的api
gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.task(name[, deps], fn)
gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
详解gulp.task(name[, deps], fn)
这个API用来创建任务，在命令行下可以输入$ gulp [name]来执行上面的任务。
name：自定义你的任务名称，
[deps]：是一个数组，里面是你定义的其他任务的名称，这些任务会在本次定义的任务之前执行并完成。
fn：是本次任务的回调函数。
举例：
gulp.task('task1',function(){
console.log("task1 done");
});
gulp.task('task2',function(){
console.log("task2 done");
});
gulp.task('task3',function(){
console.log("task3 done");
});
gulp.task('build',['task1','task2','task3'],function(){
console.log("build done");
});
执行build任务:gulp build
网友评论