首页 > 代码库 > 教你如何正确使用gulp

教你如何正确使用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/

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

教你如何正确使用gulp