项目目录
现在要对当前的项目进行压缩，对里面的样式，图片，脚本，静态页面进行压缩
在网上找了找看有没有现成的工具使用
因为项目用的是seajs，所以想找一个能对模块合并的方法，但是目前还没有合适的方法，网上的方法 gulp-seajs-combo gulp-alias-combo ，对我有配置的sea.config都没有很好的支持，所以我放弃了，还是先压缩再考虑合并问题，花了几天的时间先了解nodejs,gulp
百度，google了一堆教程，先安装了nodejs, gulp gulp插件集锦
用的是visual studio code开发
先把工具配好，参考 Visual Studio Code 使用 Typings 实现智能提示功能
//在你的项目根目录下创建gulpfile.js，代码如下：
/// <reference path="./typings/main.d.ts" />
// 引入 gulp
var gulp = require('gulp');
// 引入组件
var changed = require('gulp-changed');
var debug = require('gulp-debug');
var del = require('del'); //删除文件
var watch = require('gulp-watch');//监控文件变化
var batch = require('gulp-batch');
var vinylPaths = require('vinyl-paths');//虚拟管道
var filter = require('gulp-filter'); //文件过滤
var livereload = require('gulp-livereload');
var newer = require('gulp-newer');
var htmlmin = require('gulp-htmlmin'), //html压缩
imagemin = require('gulp-imagemin'),//图片压缩
pngcrush = require('imagemin-pngcrush'),
minifycss = require('gulp-minify-css'),//css压缩
jshint = require('gulp-jshint'),//js检测
uglify = require('gulp-uglify'),//js压缩
UglifyJS = require('uglify-js'), //JS压缩
concat = require('gulp-concat'),//文件合并
rename = require('gulp-rename'),//文件更名
through = require("through2"),
plumber = require('gulp-plumber');
图片压缩任务
gulp.task('buildimg', function() {
return gulp.src('./{distributor,consumer,retailer}/image/*.{png,jpg}', { base: './' })
.pipe(changed('build'))
.pipe(debug({title: '编译:'}))
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest('build'));
});
样式任务
gulp.task('buildCss', function() {
return gulp.src('./{distributor,consumer,retailer}/css/*.css', { base: './' })
.pipe(debug({title: '编译:'}))
.pipe(minifycss())
.pipe(gulp.dest('build'));
});
脚本任务
gulp.task('buildjs', function() {
return gulp.src(['./{distributor,consumer,retailer}/js/*.js',
'./js/*.js',
'./js/jquery/1.11.3/*.js',
'./js/{jquery,seajs}/*.js',
'!./{distributor,consumer,retailer}/js/jquery-*.js'], { base: './' })
.pipe(changed('build'))
.pipe(debug({title: '编译:'}))
// .pipe(concat('all.js'))
// .pipe(gulp.dest('dest/js'))
// .pipe(rename({ suffix: '.min' }))
.pipe(uglify({
//mangle: true,//类型：Boolean 默认：true 是否修改变量名
mangle: {except: ['require' ,'exports' ,'module' ,'$','wx','wxjsconfig']}//排除混淆关键字
}))
.pipe(gulp.dest('build'));
});
html
gulp.task('buildhtml', function () {
return gulp
.src('./{distributor,consumer,retailer}/page/*.html',{ base: './' })
.pipe(changed('build'))
.pipe(debug({title: '编译:'}))
.pipe(through.obj(function(file, encode, cb) {
var contents = file.contents.toString(encode);
var HTMLMinifier = require("html-minifier").minify; //压缩
var minified = HTMLMinifier(contents, {
minifyCSS: true,
minifyJS: true,
collapseWhitespace: true,
removeAttributeQuotes: true
});
file.contents = new Buffer(minified, encode);
cb(null, file, encode);
}))
.pipe(gulp.dest('build'));
});
文件监控，这个花的时间最多，对文件的新增，删除，修改都有及时的反应
function isunlink(file) {
return file.event === 'unlink';
}
var filterisunlink = filter(isunlink, {restore: true});
function getfiletype(file)
{
var filepath = file.path;
var index = filepath.lastIndexOf('.');
var filetype = "";
if(index>0)
filetype = filepath.substring(index,filepath.length);
return filetype;
}
function isAdded(file) {
return file.event === 'add' || file.event === 'change';
}
function ishtml(file)
{
return getfiletype(file) == ".html";
}
function isjs(file)
{
return getfiletype(file) == ".js";
}
function isCSS(file)
{
return getfiletype(file) == ".css";
}
function isImage(file)
{
return getfiletype(file) == ".jpg" || getfiletype(file) == ".png";
}
var filterAdded = filter(isAdded, {restore: true});
var filterHtml = filter(ishtml,{restore: true});
var filterJs = filter(isjs,{restore: true});
var filterCss = filter(isCSS,{restore: true});
var filterImage = filter(isImage,{restore: true});
gulp.task('buildwatch', function () {
return gulp.src('./{distributor,consumer,retailer,js}/**', { base: './' })
.pipe(watch('./{distributor,consumer,retailer,js}/**'))
.pipe(filterAdded)
.pipe(debug({title: '编译:'}))
.pipe(filterHtml)
.pipe(through.obj(function(file, encode, cb) {
var contents = file.contents.toString(encode);
var HTMLMinifier = require("html-minifier").minify; //压缩
var minified = HTMLMinifier(contents, {
minifyCSS: true,
minifyJS: true,
collapseWhitespace: true,
removeAttributeQuotes: true
});
file.contents = new Buffer(minified, encode);
cb(null, file, encode);
}))
.pipe(filterHtml.restore)
.pipe(filterJs)
.pipe(uglify({
//mangle: true,//类型：Boolean 默认：true 是否修改变量名
mangle: {except: ['require' ,'exports' ,'module' ,'$','wx','wxjsconfig']}//排除混淆关键字
}))
.pipe(filterJs.restore)
.pipe(filterImage)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(filterImage.restore)
.pipe(filterCss)
.pipe(minifycss())
.pipe(filterCss.restore)
.pipe(gulp.dest('build'))
.pipe(filterAdded.restore)
.pipe(filterisunlink)
.pipe(gulp.dest('build'))
.pipe(vinylPaths(del))
.pipe(filterisunlink.restore)
.pipe(livereload());
});
之前的版本，对新增及删除，支持不太好
// gulp.task('watch',function(){
// // 监听html文件变化
// var watcher = gulp.watch('{distributor,consumer,retailer,js}/**');
// watcher.on('change', function(event) {
// var filepath = event.path;
// var index = filepath.lastIndexOf('.');
// var filetype = "";
// console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
// if(index>0)
// filetype = filepath.substring(index,filepath.length);
// switch(filetype)
// {
// case '.html':
// gulp.run('buildhtml');
// break;
// case '.js':
// gulp.run('buildjs');
// break;
// case '.css':
// gulp.run('buildCss');
// break;
// case '.png':
// case '.jpg':
// gulp.run('buildimg');
// break;
// default:
// console.log("没有找到该类型的文件" + filetype);
// }
// });
// })
待续 2015-05-15 19:57
参考&进一步阅读
是时候搁置Grunt，耍一耍gulp了
前端打包构建工具gulp快速入门
Gulp：插件编写入门
gulp：更简单的自动化构建工具
网友评论