#Gulp 自动化构建简易教程
-
##简介
gulp
是前端开发过程中对代码进行自动化构建的工具软件,是项目自动化构建的利器。她不仅能对网站资源进行优化,而且在开发过程中可以完成很多重复的任务。使用gulp
可以大大提高我们的开发效率。 -
##目的
我们希望在我们的前端工程中使用gulp
来实现:1、将开发环境中的部分代码按上线规则进行筛选,形成 <dist> 目录用于线上部署 2、将开发环境中的部分代码按测试规则进行筛选,形成 <test> 目录用于脚本测试 3、将开发环境中的 <资源路径> 替换成生产环境或测试环境中的 <资源路径> 4、压缩 .html .css .js .png 文件 5、合并 .html .css .js .png 文件 6、在生产环境中,删除 注释 打印 等调试语句 7、在测试环境中,需要调试的地方添加打印等调试语句 8、分别在不同的环境下,配置对应的环境变量。例如:生产环境域名或对象存贮路径等。
-
##安装
###第一步:下载安装 Node
######1、访问 http://nodejs.org 下载对应系统下的安装包,安装
Node.js
和npm
程序管理包。######2、确保
Node.js
安装正确。node -v // 得到 node 的版本号
######3、确保
npm
安装正确。npm -v // 得到 npm 的版本号
###第二步:安装 Gulp
######1、在全局环境上安装
gulp
sudo npm install gulp -g // MacOS 下全局安装需要 sudo 权限
###第三步:配置需要 Gulp 自动构建的项目
######1、新建一个需要
gulp
自动化构建的工程,并进入到工程的根目录。cd ~/Develop/gx-cms
######2、在该目录下初始化 node 插件管理配置文件。
npm init
######3、本地安装
gulp
npm install gulp --save-dev
######4、安装项目需要的
gulp
组件npm install gulp-concat gulp-minify-css gulp-rev gulp-rev-collector gulp-imagemin --save-dev
###第四步:运行 Gulp
######1、建立
gulpfile.js
任务运行文件,格式如下var gulp = require('gulp'); var concat = require('gulp-concat'); //- 多个文件合并为一个; var minifyCss = require('gulp-minify-css'); //- 压缩CSS为一行; var rev = require('gulp-rev'); //- 对文件名加MD5后缀 var revCollector = require('gulp-rev-collector'); //- 路径替换 gulp.task('concat', function() { //- 创建一个名为 concat 的 task gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css']) //- 需要处理的css文件,放到一个字符串数组里 .pipe(concat('wap.min.css')) //- 合并后的文件名 .pipe(minifyCss()) //- 压缩处理成一行 .pipe(rev()) //- 文件名加MD5后缀 .pipe(gulp.dest('./css')) //- 输出文件本地 .pipe(rev.manifest()) //- 生成一个rev-manifest.json .pipe(gulp.dest('./rev')); //- 将 rev-manifest.json 保存到 rev 目录内
});
gulp.task('rev', function() {
//- 读取 rev-manifest.json 文件以及需要进行css名替换的文件 gulp.src(['./rev/*.json', './application/**/header.php']) .pipe(revCollector()) //- 执行文件内css名的替换 .pipe(gulp.dest('./application/')); //- 替换后的文件输出的目录 });
gulp.task('default', ['concat', 'rev']);
######2、执行 `gulp` 任务
gulp // 在项目跟目录下执行 gulp 命令