前端压缩工具

野子电竞数据官网改版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’]);