在发布之前还可以做代码优化:
1.压缩
2.合并
3.增加版本号
首先,手动打包发布的网站比如:https://javascript-minifier.com
显然,手动打包麻烦费时费力的,那自从node.js出来以后,方便快捷,自动化处理。
打包的主流3个工具:
1.Grunt 自动化构建工具
2.gulp 自动化构建工具
3.webpack 静态资源打包工具
这里主要先介绍用gulp工具打包,中文网址: http://www.gulpjs.com.cn/
易于使用
通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。
构建快速
利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。
插件高质
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
易于学习
通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。
先安装nodejs,然后在npm命令行里输入 npm init
生成package.json文件,里面存储一些依赖项,下面是安装:
运行 gulp -v
,出现版本号,代表安装成功。
gulpfile.js 存放想要执行的任务。
首先声明好要依赖的加载项,var gulp=require('gulp')
gulpfile.js 中定义任务,
gulp.task('task-name',function(){
});
接下来安装gulp的各种插件,
npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev
修改gulpfile.js文件
var gulp=require('gulp');
var rev=require('gulp-rev');/*给文件用哈希码添加版本号*/
var revReplace=require('gulp-rev-replace');/*更新引用*/
var useref=require('gulp-useref');/*合并文件*/
var filter=require('gulp-filter');/*过滤器:筛选,恢复*/
var uglify=require('gulp-uglify');/*压缩js*/
var csso=require('gulp-csso');/*压缩css*/
gulp.task('task-name',function(){
var jsFilter=filter('**/*.js',{restore:true});
var cssFilter=filter('**/*.css',{restore:true});
var indexHtmlFilter=filter(['**/*','!**/index.html'],{restore:true});
return gulp.src('src/html')/*需要处理的文件*/
.pipe(useref())/*处理注释压缩*/
.pipe(jsFilter)/*筛选js文件*/
.pipe(uglify())/*压缩js文件*/
.pipe(jsFilter.restore)/*放回流里*/
.pipe(cssFilter)/*筛选css文件*/
.pipe(csso())/*压缩css文件*/
.pipe(cssFilter.restore)/*放回流里*/
.pipe(indexHtmlFilter)/*筛选html文件*/
.pipe(rev())/*生成哈希版本号*/
.pipe(indexHtmlFilter.restore)/*放回流里*/
.pipe(revReplace())/*更新index引用*/
.pipe(gulp.dest('dist'));/*文件流放到dist目录下*/
});
执行 gulp task-name
gulp-useref插件的使用:在html中加入注释打包部分的代码
这里只实现了gulp的打包压缩和版本文件名的功能,其实,还有很多更厉害的功能
比如
gulp-watch监听文件的改变,自动执行任务,
gulp-postcss和 autoprefixer 添加浏览器的前缀,对css文件进行处理,
gulp-concat把多个文件直接合并成一个文件,
gulp-responsive实现图片响应式
等等