前端壓縮工具

野子電競數據官網改版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’]);