Gulp是一个基于Nodejs的自动任务运行器。可自动完成javascript/coffee/sass/less/html/image/css等文件的测试、检查、合并、压缩、格式化、浏览服务器自动刷新,生成部署文件,监听后重复指定步骤文件改变了。在实现上,她借鉴了Unix操作系统的pipe思想。上一级的输出直接成为下一级的输入,操作起来非常简单。通过本文,我们将学习如何使用Gulp改变开发流程,让开发变得更快、更高效。1、安装nodejs1.1安装:打开nodejs官网,点击巨大的绿色下载按钮,会根据系统信息选择对应的版本(.msi文件)。然后像安装QQ一样安装(安装路径可选)nodejs新1.2版本已经集成了npm,npm也已经安装好了。可以使用cmd命令行输入“npm-v”测试是否安装成功。1.3配置npm的全局模块的存放路径和缓存的路径。比如我想把上面两个文件夹放到NodeJS的主目录下,这样就可以在1.4下创建两个文件夹“node_global”和“node_cache”启动cmd,输入:npmconfigsetprefix"C:\ProgramFiles\nodejs\node_global”和npmconfigsetcache“C:\ProgramFiles\nodejs\node_cache”1.5打开系统对话框,右击“我的电脑”选择“属性”-“高级系统设置”-“高级”-》环境变量”。在系统变量下新建“NODE_PATH”,进入“C:\ProgramFiles\nodejs\node_global\node_modules”1.6由于修改了模块的默认地址,所以上面的用户变量也要相应修改(用户变量“PATH”改为“C:\ProgramFiles\nodejs\node_global\”)1.7cnpm安装,在cmd中输入以下代码将npm指向国内镜像源,然后输入cnpm-v查看版本。接下来我们可以把npm换成cnpmnpminstall-gcnpm–registry=https://registry.npm.taobao.org2.全局安装gulp2.1全局安装gulp的目的是通过她来执行gulp任务,命令提示符执行cnpminstallgulp-g2.2检查是否安装正确:在命令提示符下执行gulp-v,如果出现版本号,则安装正确。3.项目安装gulp和gulp插件3.1在D盘创建你的测试文件夹gulp,(假设你的nodejs安装在默认路径C:\ProgramFiles\nodejs,在D盘创建你的测试项目)定位通过命令行进入你的项目目录C:\Users\administor>cdd:\gulpC:\Users\administor>D:D:\gulpcnpminit(创建一个package.json文件,输入项目的相关信息,可以为空)3.2本地安装Gulp插件,以gulp-less为例(编译less文件),在命令提示符下执行cnpminstallgulp-less--save-dev3.3为了正常工作,我们必须在本地安装gulp:cnpminstallgulp--save-dev全局安装gulp执行gulp任务,本地安装gulp调用gulp插件的功能。4、配置gulpfile.js4.1gulpfile.js是gulp项目的配置文件,是一个普通的js文件,位于项目的根目录下//importtoolkitrequire('node_modules中对应的模块')vargulp=require('gulp'),//本地安装gulp的位置less=require('gulp-less');//定义一个testLess任务(自定义任务名称)gulp.task('testLess',function(){gulp.src('src/less/index.less')//task指向的文件.pipe(less())//task调用的模块.pipe(gulp.dest('src/css'));//会在src/css下生成index.css});gulp.task('default',['testLess','elseTask']);//定义默认任务elseTask为其他任务,本例不定义elseTask任务//gulp.task(name[,deps],fn)定义任务名:任务名deps:依赖任务名fn:回调函数//gulp.src(globs[,options])执行任务处理文件globs:处理后的文件路径(字符串orstringarray)//gulp.dest(path[,options])处理后的文件生成路径5.运行任务5.1.说明:命令提示符执行gulp任务名称;少测试;5.3、执行gulpdefault或gulp时会调用默认任务['testLess','elseTask']中的所有任务
