黑马程序员UI教程告别石器时代自动化构建工具Gulp.docVIP

告别石器时代-自动化构建工具Gulp 【前言】 日常工作中，我们为了网站更好的性能，往往在项目发布前需要对css，js，图片这些静态资源进行压缩，对js代码进行混淆加密，等等的工作。 而Gulp是一种自动构建工具 Gulp中文网：/ Gulp安装前准备 想要使用到Gulp，还需要一些准备工作，虽然好像有点麻烦，但是配置好了之后基本就是一劳永获。 环境 NodeJS官网：/ 现在的NodeJS安装已经变得很便捷了，只需要进入官网，下载安装即可。 NodeJS提供 和1.x和jQuery2.x的区别，LTS版本能较好的 如果已经安装过NodeJS，可跳过安装以上步骤。 《命令提示符工具》 命令提示符工具是Window系统自带的工具。很多需要NodeJS支持的工具都需要用到命令提示符工具，Gulp也不例外。 启动命令提示符工具相对简单，按以下步骤即可： 按系统快捷键 Win键 + R调出运行窗口，在输入框写入 cmd。 PS：NodeJS–v按下回车键，能打印出NodeJS的版本号，说明安装成功，如下图所示。 《安装CNPM包管理工具》 安装CNPM前，先说一下NPM（node package manager），翻译过来就是Node包管理工具， 但是由于通过NodeJS自带的NPM 国内淘宝团队做了一个NPM镜像， CNPM安装步骤 在CMD面板输入以下代码，按下回车：npm install cnpm -g --registry= 安装成功后，可通过 –v 查看版本号，若没出现版本号则为安装失败，需要自行排除问题，重新安装。 【Gulp正式安装与使用】 《全局安装Gulp》 为了能在CMD窗口能随时的调用到Gulp的相关指令，运行Gulp任务，我们需要 在命令提示符面板输入以下代码，按下回车：cnpm install gulp -g 安装成功后，也可通过 gulp –v 查看版本号。 《初始化项目配置》 首先需要通过CMD窗口进入到该项目的根目录，输入以下命令： cd /d 项目地址 在项目根目录下，初始化项目配置文件，输入以下命令： cnpm init -y 项目初始化后，会自动生成的一份叫 package.json 的配置文件，我做了一些翻译。 PS：项目中的JSON是不能有注释的，需要删除注释，否则报错。 《》 在命令提示符面板输入以下代码，按下回车：cnpm install gulp --save-dev 安装成功后，也可通过 gulp –v 查看本地版本号。 与此同时，本地会多了一个node_modules文件夹，配置文件也会自动发生变化，添加项目依赖： 对，第一次那是全局安装，为的是CMD窗口能随时的调用到Gulp的相关指令，运行Gulp任务。 《安装Gulp插件》 在命令提示符面板输入以下代码，按下回车：npm install --save-dev gulp-less 安装成功后，会多了一个叫配置文件也会自动发生变化。 《创建gulpfile.js文件》 如果要让Gulp项目跑起来，需要在项目根目录下新建一份gulpfile.js 作为启动文件。 代码如下： var gulp = require(gulp); // 载入 gulp-less 插件 var less = require(gulp-less); // 定义一个名叫的less任务，用于把less编译成css gulp.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]); }); // 定义一个默认任务，默认同时执行less和watch两个任务 gulp.task(default, [less,watch]); 《运行Gulp》 输入 gulp 或 gulp default 后，将会执行gulpfile.js 文件定义的默认任务，编译less并实时监测变化。 结果如下： 在index.html 的把link标签的路径重新指向一下即可。 【总结】 以上教程主要是初步体验Gulp，还有学会Gulp的基本安装和基本使用。这里只举例了一个插件而已，其实Gulp还