6.4、查看package.json帮助文档，命令提示符执行cnpm help package.json

特别注意：package.json是一个普通json文件，所以不能添加任何注释。参看

7、本地安装gulp插件

7.1、安装：定位目录命令后提示符执行cnpm install --save-dev；

7.2、本示例以gulp-less为例（编译less文件），命令提示符执行cnpm install gulp-less --save-dev；

7.3、将会安装在node_modules的gulp-less目录下，该目录下有一个gulp-less的使用帮助文档README.md；

7.4、为了能正常使用，我们还得本地安装gulp：cnpm install gulp --save-dev；

PS：细心的你可能会发现，我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

8、新建gulpfile.js文件（重要）

8.1、说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。

8.2、它大概是这样一个js文件（更多插件配置请查看这里）：

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//导入工具包 require(‘node_modules里对应模块’)

//定义一个testLess任务（自定义任务名称）

//gulp.task(name[, deps], fn) 定义任务name：任务名称 deps：依赖任务名称 fn：回调函数

//gulp.src(globs[, options]) 执行任务处理的文件globs：处理的文件路径(字符串或者字符串数组)

//gulp.dest(path[, options]) 处理完后文件生成路径

8.3、该示例文件请下载查看

9、运行gulp

9.1、说明：命令提示符执行gulp 任务名称；

9.2、编译less：命令提示符执行gulp testLess；

9.3、当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。

10、使用webstorm运行gulp任务

10.1、说明：使用webstorm可视化运行gulp任务；

10.2、使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口，若出现”No task found”，选择右键”Reload tasks”，双击运行即可。

11、总结

11.1、安装nodejs；

11.2、新建package.json文件；

11.3、全局和本地安装gulp；

11.4、安装gulp插件；

11.5、新建gulpfile.js文件；

11.6、通过命令提示符运行gulp任务。

12、结束语

12.1、本文有任何错误，或有任何疑问，欢迎留言说明。

转载请注明：有爱前端 » gulp详细入门教程

)

【Web优化】Yslow优化法则（汇总篇） node+express+mongo一些学习资料

3d刷新数据

anime动画库+canvas烟花效果

纯css方向进入

网页抓取滚动