告别石器时代-自动化构建工具Gulp【前言】日常工作中，我们为了网站更好的性能，往往在项目发布前需要对css，js，图片这些静态资源进行压缩，对js代码进行混淆加密，等等的工作。而Gulp是一种自动构建工具，开发过程中很多重复的任务能够使用Gulp自动完成，大大提高我们的工作效率。Gulp中文网：http://www.gulpjs.com.cn/【Gulp安装前准备】想要使用到Gulp，还需要一些准备工作，虽然好像有点麻烦，但是配置好了之后基本就是一劳永获。《安装NodeJS环境》NodeJS官网：https://nodejs.org/现在的NodeJS安装已经变得很便捷了，只需要进入官网，下载安装即可。NodeJS提供2个版本安装包下载，LTS和Current版本的区别类似jQuery1.x和jQuery2.x的区别，LTS版本能较好的支持老版本特性，推荐下载。如果已经安装过NodeJS，可跳过安装以上步骤。《命令提示符工具》命令提示符工具是Window系统自带的工具。很多需要NodeJS支持的工具都需要用到命令提示符工具，Gulp也不例外。启动命令提示符工具相对简单，按以下步骤即可：1．按系统快捷键Win键+R调出运行窗口，在输入框写入cmd。2．点击确定按钮或按下回车键后，弹出的窗口就是命令提示符，简称cmd。PS：NodeJS安装完成后，在CMD面板输入node–v按下回车键，能打印出NodeJS的版本号，说明安装成功，如下图所示。《安装CNPM包管理工具》安装CNPM前，先说一下NPM（nodepackagemanager），翻译过来就是Node包管理工具，用于Node插件管理，如安装、卸载、更新等。但是由于通过NodeJS自带的NPM安装插件是从国外服务器下载，受网络影响大，很容易就出现异常，使用CNPM下载包就快多了，稳定性相对更高。国内淘宝团队做了一个NPM镜像，每10分钟和国外分NPM服务器同步一次，以保证尽量与官方服务同步，所以可以放心的使用CNPM取代NPM。<CNPM安装步骤>在CMD面板输入以下代码，按下回车：npminstallcnpm-g--registry=https://registry.npm.taobao.org安装成功后，可通过cnpm–v查看版本号，若没出现版本号则为安装失败，需要自行排除问题，重新安装。【Gulp正式安装与使用】《全局安装Gulp》为了能在CMD窗口能随时的调用到Gulp的相关指令，运行Gulp任务，我们需要全局安装Gulp，步骤如下：在命令提示符面板输入以下代码，按下回车：cnpminstallgulp-g安装成功后，也可通过gulp–v查看版本号。《初始化项目配置》我们以课堂上网易俱乐部的项目举例，目录结构如下，注意项目名称不能是中文：首先需要通过CMD窗口进入到该项目的根目录，输入以下命令：cd/d项目地址在项目根目录下，初始化项目配置文件，输入以下命令：cnpminit-y项目初始化后，会自动生成的一份叫package.json的配置文件，我做了一些翻译。PS：项目中的JSON是不能有注释的，需要删除注释，否则报错。《本地安装Gulp》在命令提示符面板输入以下代码，按下回车：cnpminstallgulp--save-dev安装成功后，也可通过gulp–v查看本地版本号。与此同时，本地会多了一个node_modules文件夹，配置文件package.json也会自动发生变化，添加项目依赖：注意：大家可能会觉得有些奇怪，刚才不是安装了Gulp吗？对，第一次那是全局安装，为的是CMD窗口能随时的调用到Gulp的相关指令，运行Gulp任务。这里是本地项目安装，Gulp模块会被复制到项目的node_modules/下，是为了调用Gulp插件的功能。《安装Gulp插件》在命令提示符面板输入以下代码，按下回车：npminstall--save-devgulp-less安装成功后，node_modules会多了一个叫gulp-less的目录，配置文件package.json也会自动发生变化。《创建gulpfile.js文件》如果要让Gulp项目跑起来，需要在项目根目录下新建一份gulpfile.js作为启动文件。代码如下：//载入gulpvargulp=require('gulp');//载入gulp-less插件varless=require('gulp-less');//定义一个名叫的less任务，用于把less编译成cssgulp.task('less',function(){gulp.src('./less/*.less')//源文件地址.pipe(less())//运行插件.pipe(gulp.dest('./dist/css'));//编译后文件输出地址});//定义一个名叫的less任务，用于检查less文件变化gulp.task('watch',function(){gulp.watch('./less/*.less',['less']);}...