前端压缩工具

野子电竞数据官网改版 https://www.xxe.io/ 全新登场
介绍一下 webpack 和 gulp 以及项目中的具体使用
现今的很多网页其实可以看做是功能丰富的应用，它们拥有复杂的 javascript 代码和一大堆依赖包，为了简化开发的复杂度，有很多实践方法
模块化：将复杂的程序细化为小的文件
类似于 typescript 这种在 js 基础上拓展的开发语言，可以简化我们的开发，并且之后可以用 bable 等工具将其转化成为 js 即浏览器认识的语言
Sass,less 等 css 预处理器
webpack 是模块打包机，它做的事情是分析你的项目结构，找到 js 模块以及其他的一些浏览器不能直接运行的语言，并将其打包为合适的格式供浏览器使用
Babel
编译 js 的平台，可以使用下一代的 es6 和 es7
使用基于 js 拓展的语言，如 react 的 JSX
模块组织的几种方法
通过书写在不同文件中，使用 script 标签进行加载
common.js node.js 使用的就是这种方式
amd 进行加载 require.js 使用这种模式
es6 模块
webpack
webpack 的特点
丰富的插件方便进行工作
大量的加载器，包括加载各种静态资源
代码分割，提供按需加载的能力
发布工具
webpack 的优势
webpack 是以 commonjs 的形式来书写脚本 但对 amd 和 cmd 也支持全面，方便旧项目进行代码迁移
能被模块化的不仅仅是 js 了
开发便捷 能替代部分 grunt 和 gulp 的工作 比如打包 压缩 图片转 base64
扩展性强 插件机制完善
webpack 的属性值
entry 入口文件
output: 定义构建后的输出文件
module:loaders 加载各种资源
reslove resolve 属性中的 extensions 数组用于配置程序中可以自行补全哪些文件后缀
plugin 提供了丰富的组件来满足不同的需求
externals 当我们想在项目中 require 一些其他的类库或者 api 而又不想让这些类库的源码被构建到运行时文件中
context
Grunt
配置 gruntfile.js
module.exports = function () {
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’);
});
grunt.registerTask(‘default’, []);
}
1
2
3
4
5
6
grunt 插件介绍
contrib-jshint js 语法错误勘察
contrib-watch 实时监控文件变化 调用相应的任务重新执行
contrib-clean
contrib-copy
contrib-concat
karma 前端自动化测试化工具
uglify 插件
uglify: {
options: {
stripBanner: true,
banner:
},
build: {
src:
dest
}
}

在 initConfig 之后
grunt.loadNpmTasks(‘grunt-contrib-ugify’);
grunt.registerTask(‘default’,‘ugify’);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
banner: 即在生成的压缩文件第一行加一句话说明，pkg 可以获得 package.json 的内容
build: 配置了源文件和压缩文件，即规定了要压缩谁 压缩之后生成谁
jshint
jshint: {
build: [‘Gruntfile.js’,‘src/.js’],
options: {
jshintrc:‘.jshintrc’
}
}
1
2
3
4
5
6
使用 watch 插件
watch: {
build: {
files: [‘src/.js’,‘src/.css’],
tasks: [‘jshint’,‘uglify’],
options: {spawn: false}
}
}
1
2
3
4
5
6
7
gulp
gulpfile.js
gulp 的配置文件
var gulp = require(‘gulp’)
var less = require(‘gulp-less’)
gulp.task(‘testLess’, function () {
gulp.src=(‘src/less/index.less’)
.pip(less())
.pip(gulp.dest(‘src/css’))
});
// 定义默认任务，并让 gulp 监视文件变化自动执行
gulp.task(‘default’, [‘watch’], function () {
gulp.watch(‘sass/.scss’,[‘sass’]);
});
1
2
3
4
5
6
7
8
9
10
11
12
gulp 常用插件
js 压缩
var gulp = require(‘gulp’);
var rename = require(‘gulp-rename’);
var uglify = require(‘gulp-uglify’);
gulp.task(‘rename’, function () {
gulp.src(‘src//*.js’)
.pipe(uglify())
.pipe(rename(‘idnex.min.js’))
.pipe(gulp.dest(‘build/js’);
});
gulp.task(‘default’, [‘rename’]);
1
2
3
4
5
6
7
8
9
10
html 压缩
var minifyHtml = require(‘gulp-minify-html’);
gulp.task(‘minify-html’, function () {
gulp.src(‘src//.html’)// 要压缩的 html 文件
.pipe(minifyHtml())// 压缩
.pipe(gulp.dest(‘build’))
});
1
2
3
4
5
6
js 文件合并
var concat = require(‘gulp-concat’);
gulp.task(‘concat’, function () {
gulp.src(‘src/**/.js’)// 要合并的文件
.pipe(concat(‘index.js’))// 合并匹配到的 js 文件并命名为 index.js
.pipe(gulp.dest(‘build/js’))
});
1
2
3
4
5
6
gulp-less
var gulp = require(‘gulp’),

var less= require(“gulp-less”);

gulp.task(‘compile-less’,function() {

gulp.src(‘src/less/*.less’)

.pipe(less())

.pipe(gulp.dest(‘build/css’));
1
2
3
4
5
});
gulp.task(‘default’,[‘compile-less’]);