gulp简单使用

目录：

安装nodejs

安装完成npm可以选装cnpm

全局安装gulp

新建package.json文件

本地安装gulp插件

新建gulpfile.js文件

使用webstorm运行gulp任务

---

一、安装nodejs

  gulp是基于nodejs，理所当然需要安装nodejs; 安装node的话，自行看教程安装啦。 安装完成以后查看node安装情况：

node  -v 查看node版本npm   -v 查看npm版本

---

二、安装完成npm可以选装cnpm(淘宝的镜像，反正相比npm很快duo了)

npm install cnpm -g --registry=https://registry.npm.taobao.org 

安装完成以后查看cnpm安装情况：

cnpm -v          查看cnpm版本

三、全局安装gulp

cnpm install gulp -g

安装完成以后查看gulp安装情况：

gulp -v           查看gulp版本

四、新建package.json文件

cnpm init

五、本地安装gulp插件

cnpm install gulp-less --save-dev

六、新建gulpfile.js文件

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

它大概是这样一个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]) 处理完后文件生成路径

七、使用webstorm运行gulp任务

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