項(xiàng)目目錄
現(xiàn)在要對(duì)當(dāng)前的項(xiàng)目進(jìn)行壓縮，對(duì)里面的樣式，圖片眉睹，腳本留潦，靜態(tài)頁面進(jìn)行壓縮
在網(wǎng)上找了找看有沒有現(xiàn)成的工具使用
因?yàn)轫?xiàng)目用的是seajs，所以想找一個(gè)能對(duì)模塊合并的方法辣往，但是目前還沒有合適的方法兔院，網(wǎng)上的方法 gulp-seajs-combo gulp-alias-combo ，對(duì)我有配置的sea.config都沒有很好的支持站削，所以我放棄了坊萝，還是先壓縮再考慮合并問題，花了幾天的時(shí)間先了解nodejs,gulp
百度许起，google了一堆教程十偶，先安裝了nodejs, gulp gulp插件集錦
用的是visual studio code開發(fā)
先把工具配好，參考 Visual Studio Code 使用 Typings 實(shí)現(xiàn)智能提示功能
//在你的項(xiàng)目根目錄下創(chuàng)建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');//監(jiān)控文件變化
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檢測(cè)
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');
圖片壓縮任務(wù)
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'));
});
樣式任務(wù)
gulp.task('buildCss', function() {
return gulp.src('./{distributor,consumer,retailer}/css/*.css', { base: './' })
.pipe(debug({title: '編譯:'}))
.pipe(minifycss())
.pipe(gulp.dest('build'));
});
腳本任務(wù)
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 默認(rèn)：true 是否修改變量名
mangle: {except: ['require' ,'exports' ,'module' ,'$','wx','wxjsconfig']}//排除混淆關(guān)鍵字
}))
.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'));
});
文件監(jiān)控惦积，這個(gè)花的時(shí)間最多，對(duì)文件的新增猛频，刪除狮崩，修改都有及時(shí)的反應(yīng)
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 默認(rèn)：true 是否修改變量名
mangle: {except: ['require' ,'exports' ,'module' ,'$','wx','wxjsconfig']}//排除混淆關(guān)鍵字
}))
.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());
});
之前的版本，對(duì)新增及刪除鹿寻，支持不太好
// gulp.task('watch',function(){
// // 監(jiān)聽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);
// }
// });
// })
待續(xù) 2015-05-15 19:57
參考&進(jìn)一步閱讀
是時(shí)候擱置Grunt睦柴，耍一耍gulp了
前端打包構(gòu)建工具gulp快速入門
Gulp：插件編寫入門
gulp：更簡(jiǎn)單的自動(dòng)化構(gòu)建工具
