gulp使用流程：安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
安装nodejs：gulp是基于nodejs，打开node官网下载安装。
使用命令行：node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。PS：未能出现版本号，请尝试注销电脑重试；
npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器。
cd定位到目录，用法：cd + 路径 ；
dir列出文件列表；
cls清空命令提示符窗口内容。全局安装gulp
2.1安装：命令提示符执行npm install gulp -g；
2.2查看版本：命令提示符执行gulp -v，出现版本号即为正确安装。新建package.json
3.1、说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
3.2、它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）
1. {
2. "name": "test", //项目名称（必须）
3. "version": "1.0.0", //项目版本（必须）
4. "description": "This is for study gulp project !", //项目描述（必须）
5. "homepage": "", //项目主页
6. "repository": { //项目资源库
7. "type": "git",
8. "url": "https://git.oschina.net/xxxx"
9. },
10. "author": { //项目作者信息
11. "name": "liuwj",
12. "email": "281862271@qq.com"
13. },
14. "license": "ISC", //项目许可协议
15. "devDependencies": { //项目依赖的插件
16. "gulp": "^3.8.11",
17. "gulp-less": "^3.0.0"
18. }
19. }
3.3、我们应该使用更为效率的方法：命令提示符执行npm init
查看package.json帮助文档，命令提示符执行npm help package.json
本地安装gulp插件
4.1、安装：定位目录命令后提示符执行npm install --save-dev；
4.2、本示例以gulp-less为例（编译less文件），命令提示符执行npm install gulp-less --save-dev；
4.3、本地安装gulp：npm install gulp --save-dev；新建gulpfile.js文件*
5.1、说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。
5.2、它大概是下面这样一个js文件
1. /*
2. ** 创建人：Liuwj
3. ** 创建日期：2016年12月12日17:43:40
4. ** 功能介绍：gulp工具的安装、常用插件、基础用法
5. */
6. // 定义gulp gulp-uglify gulp-concat 等插件
7. // 导入工具包 require('node_modules里对应模块')
8. var gulp = require("gulp"); //gulp 基础库
9. var uglify = require("gulp-uglify"); //压缩js
10. var concat = require("gulp-concat"); //合并文件
11. // 所有要压缩的文件路径
12. var paths = {
13. scripts:['js/index.js','js/main.js']
14. };
15. var date = new Date().getTime()/1000;
16. /*
17. ** ①gulp.task: 定义要实现的任务
18. ** "testGulp": 自定义任务名称，不能加空格
19. ** ②gulp.src: 获取流
20. ** ③gulp.dest: 用来写文件
21. ** ④gulp.watch: 例如：gulp.watch('js\/**\/*.js', ['uglify','reload']);
22. */
23. gulp.task("testInfo",function(){
24. console.log(Math.round(date));
25. console.log('this is a testGulp');
26. });
27. gulp.task("testGulp", function(){
28. gulp.src(paths.scripts) //该任务针对的文件
29. .pipe(uglify()) //先压缩输出
30. .pipe(concat("all.min.js")) //合并到all.min.js
31. .pipe(gulp.dest("build"));
32. });
33. gulp.task("default",["testGulp"]); //定义默认任务
34. /*
35. ** 常用插件：
36. * 安装：npm install <name> [-g] [--save-dev]
37. * 卸载：npm uninstall <name> [-g] [--save-dev]
38. * gulp-uglify: js文件压缩
39. * gulp-rename: 重命名文件
40. * gulp-minify-css: 压缩css文件
41. * gulp-minify-html: html文件压缩
42. * gulp-concat: 文件合并
43. * browser-sync: 自动刷新
44. */
运行gulp
6.1、说明：命令提示符执行gulp 任务名称；
6.2、编译less：命令提示符执行gulp testLess；
6.3、当执行gulp default或gulp将会调用default任务里的所有任务[‘testGulp’,’elseTask’]。-
使用webstorm运行gulp任务
7.1、说明：使用webstorm可视化运行gulp任务；
7.2、使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口，若出现”No task found”，选择右键”Reload tasks”，双击运行即可。
webstorm截屏 总结
8.1、安装nodejs；
8.2、新建package.json文件；
8.3、全局和本地安装gulp；
8.4、安装gulp插件；
8.5、新建gulpfile.js文件；
8.6、通过命令提示符运行gulp任务。
