使用gulp构建项目
一.环境准备
1.1 gulp介绍
- gulp是基于node.js 文件流的一个前端自动化构建工具,可以使用它构建自动化工作流程,简化工作量
- 官方定义:
基于文件流的构建系统
- 核心文件:
gulpfile.js
和package.json
- gulpfile.js:任务脚本
- package.json:任务配置文件
1.2 安装gulp
npm install gulp -g
1.3 构建项目
- (1)切换到项目根目录(即 gulpfile.js 所在目录),命令行安装任务所依赖的包:
npm install
- (2)安装完成后,即可直接执行命令:
gulp
二.使用实例 - 打包js和css
2.1 在 package.json
中引用依赖gulp-minify-css
和gulp-uglify
"devDependencies": {
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-header": "^1.8.8",
"gulp-minify-css": "^1.2.4",
"gulp-replace": "^0.6.1",
"gulp-uglify": "^1.5.4"
}
2.2 定义我们第一个gulp流程
var pkg = require("./package.json");
var del = require("del");
var gulp = require("gulp");
var uglify = require("gulp-uglify");
var minify = require("gulp-minify-css");
var replace = require("gulp-replace");
var header = require("gulp-header");
// 定义任务
var destDir = "./dist" // 构建的目标目录
,note = [// 注释
"/** <%= pkg.name %>-v<%= pkg.version %> <%= pkg.license %> License By <%= pkg.homepage %> */
<%= js %>"
,{pkg: pkg, js: ";"}
]
,task = {
minjs: function(){// 压缩 JS
var src = [
"./src/**/*.js"
,"!./src/config.js"// ! 表示不压缩该文件
];
return gulp.src(src).pipe(uglify())// 使用压缩工具
.pipe(header.apply(null, note))
.pipe(gulp.dest(destDir));
}
,mincss: function(){// 压缩 CSS
var src = [
"./src/**/*.css"
]
,noteNew = JSON.parse(JSON.stringify(note));
noteNew[1].js = "";
return gulp.src(src).pipe(minify({
compatibility: "ie7"
})).pipe(header.apply(null, noteNew))
.pipe(gulp.dest(destDir));
}
,mv: function(){// 复制文件夹
gulp.src("./src/config.js")
.pipe(gulp.dest(destDir));
return gulp.src("./src/views/**/*")
.pipe(gulp.dest(destDir + "/views"));
}
};
// 清理工作
gulp.task("clear", function(cb) {
return del(["./dist/*"], cb);
});
// 构建入口
gulp.task("default", ["clear", "src"], function(){
for(var key in task){
task[key]();
}
});
2.3 构建输出
[13:31:17] Using gulpfile .xxxgulpfile.js
[13:31:17] Starting "clear"...
[13:31:17] Starting "src"...
[13:31:17] Finished "src" after 11 ms
[13:31:17] Finished "clear" after 57 ms
[13:31:17] Starting "default"...
[13:31:17] Finished "default" after 5.26 ms