如何打包发布-Gulp
压缩
在线压缩工具
https://javascript-minifier.com/
使用Node.js打包
Grunt (自动化构建工具)
Gulp (自动化构建工具)
Webpack (静态资源打包工具)
Gulp
ulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器
安装gulp
在windows下一定要注意,最好使用cnpm进行安装,
安装cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
再安装gulp
cnpm install gulp -g
安装后会在工程根目录下出现一个package.json的文件
{
"name": "test", //项目名称（必须）
"version": "1.0.0", //项目版本（必须）
"description": "我的项目描述", //项目描述（必须）
"homepage": "", //项目主页
"repository": { //项目资源库
"type": "git",
"url": "https://git.oschina.net/xxxx"
},
"author": { //项目作者信息
"name": "surging",
"email": "surging2@qq.com"
},
"license": "ISC", //项目许可协议
"devDependencies": { //项目依赖的插件
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
}
}
安装gulp的相关插件
cnpm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-c
sso --save-dev
合并压缩
工程根目录下创建一个gulpfile.js的文件,并输入
var gulp = require('gulp');
var rev = require('gulp-rev');//添加版本号
var revReplace = require('gulp-rev-replace');//更新index.html下的引用
var useref = require('gulp-useref');//合并css或js文件
var filter = require('gulp-filter');//筛选和恢复
var uglify = require('gulp-uglify');//压缩JS文件
var csso = require('gulp-csso');//压缩CSS文件
gulp.task('default', function () {
var jsFilter = filter('**/*.js', {restore: true});
var cssFilter = filter('**/*.css', {restore: true});
var indexHtmlFilter = filter(['**/*', '!**/index.html'], {restore: true});
return gulp.src('src/index.html')
.pipe(useref())
.pipe(jsFilter)
.pipe(uglify())
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe(csso())
.pipe(cssFilter.restore)
.pipe(indexHtmlFilter)
.pipe(rev())
.pipe(indexHtmlFilter.restore)
.pipe(revReplace())
.pipe(gulp.dest('dist'));
});
打包之后会在工程根目录中生成dist的文件夹 ,大功告成
--END--
