gulp入门教程

1、先下载安装node.js（安装路径随意）

2、使用快捷键win+r打开cmd命令窗口：

　　node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。

　　npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器。

　　cd 文件夹名   -----进入文件夹

　　D:      -----进入D盘

　　dir      -----列出文件列表

　　cls或快捷键ctrl+l    -----清屏

　　

 3、选装cnpm

　　命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org

　　注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误。

4、全局安装gulp

　　命令提示符执行cnpm install gulp -g

　　注意：安装完后最好查看其版本号gulp -v确认安装成功。

5、新建package.json文件

　　命令提示符执行cnpm init，然后按提示一步步填好。

　　

6、本地安装gulp插件

　　以less为例：定位目录命令后提示符执行cnpm install gulp-less --save-dev

　　注意：为了能正常使用，还得在本地安装gulp，命令cnpm install gulp --save-dev

　　PS：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

7、新建gulpfile.js文件（重要），代码如下：

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

　　var gulp = require('gulp'), //本地安装gulp所用到的地方

    　　less = require('gulp-less');

 

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

　　gulp.task('testLess', function () {

    　　gulp.src('src/less/index.less') //该任务针对的文件

        　　.pipe(less()) //该任务调用的模块

       　　 .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css

　　});

 

　　gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务

 

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

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

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

8、运行gulp

　　命令提示符执行gulp 任务名称；

　　如：运行less任务  gulp testLess

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

9、使用webstorm运行gulp任务　　

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

 

　　

 

10、原文链接：http://www.ydcss.com/archives/18