使用gulp来构建你的web和h5项目
gulp
对项目的静态资源html、js、css、image压缩和打包的工具,可以对应替换html中css、js、image,css中image的路径。
主要依赖
{
"name": "my-project",
"version": "0.1.0",
"devDependencies": {
"dateformat": "^1.0.12",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-cache": "^0.4.5",
"gulp-concat": "^2.6.0",
"gulp-html-minify": "0.0.14",
"gulp-htmlmin": "^3.0.0",
"gulp-imagemin": "^3.1.1",
"gulp-md5-plus": "^0.2.5",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^2.0.0"
}
}
gulpfile.js 内容如下
// Include gulp
var gulp = require('gulp');
//del older files
var del = require('del');
gulp.task('clean', function (cb) {
del([
'build/*',
], cb);
});
//js
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var gulpMD5 = require('gulp-md5-plus');
//html http://kangax.github.io/html-minifier/
//html https://github.com/kangax/html-minifier
// var htmlminify = require("gulp-html-minify");
var htmlminify = require("gulp-htmlmin");
gulp.task('html' , function(){
return gulp.src("src/**/*.html")
.pipe(htmlminify({ignoreCustomComments: '[ /^<!/ ]',
collapseWhitespace: true,
preserveLineBreaks:false,
processConditionalComments:true}))
.pipe(gulp.dest("build"))
});
gulp.task('scripts', ['html'], function() {
return gulp.src('src/**/*.js')
.pipe(uglify())
.pipe( gulpMD5(32, 'build/**/*.html') )
.pipe(gulp.dest('build/'));
});
// images
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
gulp.task('images', ['html'], function() {
return gulp.src('src/**/*.png')
.pipe(imagemin({progressive: true }))
.pipe( gulpMD5(32, 'build/**/*.css') )
.pipe(gulp.dest('build/'));
});
// css
// 获取 minify-css 模块(用于压缩 CSS)
var minifyCSS = require('gulp-minify-css')
// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', ['html'], function () {
// 1. 找到文件
return gulp.src('src/**/*.css')
// 2. 压缩文件
.pipe(minifyCSS())
// 3. 另存为压缩文件
.pipe( gulpMD5(32, 'build/**/*.html') )
.pipe(gulp.dest('build'))
})
gulp.task('default', ['clean', 'images', 'css', 'scripts']);
执行gulp
gulp-practise$ gulp
[07:48:16] Using gulpfile /wwwroot/web_build/gulp-practise/gulpfile.js
[07:48:16] Starting 'clean'...
[07:48:16] Starting 'html'...
[07:48:16] Finished 'html' after 43 ms
[07:48:16] Starting 'images'...
[07:48:16] Starting 'css'...
[07:48:16] Starting 'scripts'...
[07:48:17] Finished 'scripts' after 256 ms
[07:48:17] Finished 'css' after 262 ms
[07:48:17] gulp-imagemin: Minified 1 image (saved 0 B - 0%)
[07:48:17] Finished 'images' after 369 ms
项目github路径
https://github.com/robertzhai/web_build/tree/master/gulp-practise