1.手动压缩代码 https://javascript-minifier.com/
2.主流的三个工具 :
1.Grunt 自动化构建工具
2.Gulp 自动化构建工具 www.gulpjs.com.cn
构建的步骤：
1. npm init
2. npm install gulp --save-dev
3. gulp -v
4.在根目录创建文件 gulpfile.js
5.继续安装插件
image.png
6.
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');
var csso = require('gulp-csso');
gulp.task("index", 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()) // Concatenate with gulp-useref
.pipe(jsFilter)
.pipe(uglify()) // Minify any javascript sources
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe(csso()) // Minify any CSS sources
.pipe(cssFilter.restore)·
.pipe(indexHtmlFilter)
.pipe(rev()) // Rename the concatenated files (but not index.html)
.pipe(indexHtmlFilter.restore)
.pipe(revReplace()) // Substitute in new filenames
.pipe(gulp.dest('public'));
});
推荐一款gulp插件 根据项目的 css js 实时改变编译的文件
gulp - watch
gulp - postcss
gulp - contact
gulp - reponsive 生成响应式图片
上面的gulpfile.js可以作为一个基类 以后进行扩展
gulp 不仅仅 可打包 自动化工具 优化前端工作流程
3.Webpack --静态资源的打包工具
