gulp和grunt前端自动化工具。只有用过它们，你才会知道它们的重要性。他们存在多久了？你真的用过吗？写一个less和watchtasks的简单demo分享————1.准备工作：安装globalnode和npm，本教程不做详细介绍；新建一个getstart文件夹，在文件夹中创建package.json，记得加上{}，保存2.在命令提示符下，进入getstart文件夹，依次安装node模块：npminstall--save-devgulpnpminstall--save-devgulp-lessnpminstall--save-devgulp-watchnpminstall--save-devrequire-dir3.在根目录新建gulpfile.js和gulp文件夹；在 gulp文件夹下新建tasks文件夹和config.js文件；创建default.js、less.js，观察。js。tasks文件存放config.js配置任务对应的任务和相关配置（一）gulpfile.js（gulp入口文件），最基本的写法就是在这个文件中配置所有的任务，我们这里做一层分离,在gulp/tasks中使用require-dir导入任务varrequireDir=require('require-dir');requireDir('./gulp/tasks',{recurse:true});(2)config配置：/*gulp命令会通过gulpfile.js运行，所以src和build文件夹路径如下（根目录下）*/varsrc='./src';vardest='./build';module.exports={less:{all:src+"/less/**/*.less",//全部less(3)写default，默认任务，这里默认任务添加less和watch任务：vargulp=require('gulp');gulp.task('default',['less','watch']);(4)编写less任务，这里引入config.js配置文件，pipe()方法会依次执行，如下：先获取less源文件，然后编译，最后输出。vargulp=require('gulp');varless=require('gulp-less');varconfig=require('../config').less;gulp.task('less',function(){returngulp.src(config.src)//less源文件.pipe(less(config.settings))//执行编译.pipe(gulp.dest(config.dest))//输出目录});(5)写watch任务，vargulp=require('gulp');varwatch=require('gulp-watch');varconfig=require('../config');gulp.task('watch',function(){watch(config.less.all,function(){//监听所有的lessgulp.start('less');//当有修改时，立即执行less任务})})4.创建src->less文件夹在根目录下，创建需要的less文件如下： 根据config配置，会在less文件夹下编译less，如下main.less：@import"app/b.less";根据config配置，会编译监控less中的所有文件，一旦有变化就会编译。最后输出到build->css 尝试修改a.less，会自动编译。OK，这个demo就完成了，很简单！这是一项非常简单的任务。当然，我们可以用gulp做很多事情，比如压缩图片、压缩代码、合并、iconFont，以及配置不同生产环境所需的任务：deploy、staging、localhost等。如果真的用得好，可以大大提高提高开发和维护效率。这个演示只是一个简单的介绍。真正学习gulp，还是得去官网学习。
