为什么要使用Gulp？
看了两天的Gulp，目前接触到Gulp及其一些插件的功能有：
编译LESS（或Sass）、合并与压缩CSS和JS文件、在文件修改后自动刷新页面、给文件添加版本信息等。
这些功能可以让我专注于前端开发，而不用再去管文件的编译等琐事，也不用再在修改代码后手动刷新浏览器查看效果。
这些功能几乎都依赖于Gulp的插件，当然还有更多提供其他功能的插件，大家可以去探索发现。
Gulp详细入门教程
如果不知道Gulp的基础使用方法的话，可以戳下面的链接：
Gulp详细入门教程
一个使用Gulp的小demo
这个demo使用Gulp实现文件修改后的自动刷新浏览器页面、编译LESS以及合并压缩CSS文件。
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'),
less = require('gulp-less'),
browserSync = require('browser-sync'), // 保存自动刷新
cssnano = require('gulp-cssnano'), // CSS 压缩
rename = require('gulp-rename'), // 重命名，其实在这个demo里没有用到
concat = require('gulp-concat'), // 合并文件
//当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber
notify = require('gulp-notify'), // 相当于 console.log()
plumber = require('gulp-plumber');
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
gulp.src('src/less/*.less') //该任务针对的文件
.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')})) //错误处理
.pipe(less()) //编译less
.pipe(gulp.dest('src/css')) //将会在src/css下生成CSS文件
.pipe(concat('index.min.css')) //合并CSS文件为index.min.css
.pipe(cssnano()) //压缩
.pipe(gulp.dest('dist')); //输出压缩后的文件
});
gulp.task('testWatch', function () {
browserSync.init({
server: {
baseDir: 'dist' // 在 dist 目录下启动本地服务器环境，自动启动默认浏览器
}
});
gulp.watch('src/less/*.less', ['testLess']);
gulp.watch(['dist/*']).on('change', browserSync.reload);
});
//gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径
解释一下代码
首先需要在命令行中执行Gulp任务：
gulp testWatch
在名为testWatch的task中，browserSync.init()启动了服务器并打开浏览器、打开了dist文件夹下的index.html页面。
其下的两个gulp.watch()方法分别监视了less文件的修改与dist文件夹下文件的修改，当less文件修改时，调用名为testLess的task，完成less文件的编译并合并压缩CSS文件；此时dist下的CSS文件被修改了，会调用browserSync.reload方法刷新页面。
下附项目目录结构：
项目目录结构
最后
这个demo中用到的插件有：
- browser-sync
- gulp-concat
- gulp-cssnano
- gulp-less
- gulp-notify
- gulp-plumber
- gulp-rename
在代码的注释里面说明了它们的用途，在使用之前我们需要使用以下指令安装插件并添加到package.json文件的开发依赖中。
npm install <插件名> --save-dev
也许你不需要编译LESS的功能，也许你还需要更多其他Gulp的功能，这些通过灵活使用Gulp的插件都能够实现。
最后推荐两个我认为对学习Gulp入门有用的链接：
想了解更多关于Gulp基础API的知识，可以看gulp API 文档
再推荐一位大佬的文章，可以学到更多关于Gulp的用法：
Gulp 自动化你的前端
