教你如何正确使用gulp

容开始---

今天上网了解了一下gulp自动化构建工具，他是基于node.js的，在node下面有一个强大的包管理器，你可以用它安装许多好用的插件，比如自动编译sass或者是less，压缩你的代码等等。。那么gulp究竟该如何使用呢，下面我将引导你们步入你们学习gulp的第一步：

 

使用gulp教程：（-->后面的内容是在命令提示符中输入的）
一：在电脑上安装node.js运行环境
二：安装cnpm镜像 -->npm install cnpm -g --registry=https://registry.npm.taobao.org(node.js有一个强大的包管理器npm，用于node的插件管理，由于服务器是国外的，安装插件的速度会很慢，所以先用npm安装cnpm，这是一个完整 npmjs.org镜像，用法与npm相同)
三：安装全局的cnpm -->cnpm install --global gulp
四：进入项目的根目录,本地安装gulp -->cnpm install --save-dev gulp
五：在项目的根目录下 -->cnpm init(初始化)
六：本地安装gulp插件 -->cnpm install --save-dev gulp-less(安装gulp-less插件)
七：在根目录下创建一个名为gulpfile的js文件，并将gulp插件配置写入（先注入依赖环境，导入工具包，代码var gulp = require('gulp')）;

八：设置实时监听，自动化构建 -->gulp watch

接下来就可以任意安装你想要使用的插件了，记得先在命令提示符中安装插件（具体看第六步），然后在你的gulpfile文件中声明插件变量（var less = require('gulp-less')），再调用gulp的task方法定义该插件得的使用（

gulp.task('css',function(){　　//这里的第一个参数为任务名（自己取的，之后执行task方法的时候使用的就是这个名字）
gulp.src('src/less/index.less') //需要处理的文件路径
.pipe(less())//执行方法
.pipe(gulp.dest('lib/css')); //处理后的文件输出路径
})

），最后不要忘了执行你定义好的功能（gulp.task('default',['css']); //执行任务），这一套下来基本配置就结束了，但每次改变你的代码都要在命令提示符中输入gulp指令，这个时候就要使用gulp的本命功能了，自动化执行任务（

gulp.task('watch',function(){
gulp.watch('src/less/index.less',['css']) //实时监听变化-->命令提示符中输入gulp watch
}) //第一个参数为需要处理的文件路径，第二个为该任务名

）

到这里gulp的基本使用方法就简单地说明完毕了，由于本人也是刚接触gulp，整理得也很仓促，大家如果想了解更多的gulp插件的话，请上gulp的官网　　http://www.gulpjs.com.cn/

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　一步一个脚印，共同见证彼此，我是你们的朋友，吴超！