前端压缩工具

介绍一下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', []);
}

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');

• banner: 即在生成的压缩文件第一行加一句话说明，pkg可以获得package.json的内容
• build: 配置了源文件和压缩文件，即规定了要压缩谁 压缩之后生成谁

jshint

jshint: {
    build: ['Gruntfile.js', 'src/*.js'],
    options: {
        jshintrc: '.jshintrc'
    }
}

使用watch插件

watch: {
    build: {
        files: ['src/*.js', 'src/*.css'],
        tasks: ['jshint', 'uglify'],
        options: {spawn: false}
    }
}

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']);
});

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']);

• html压缩

var minifyHtml = require('gulp-minify-html');
gulp.task('minify-html', function () {
    gulp.src('src/**/*.html')//要压缩的html文件
    .pipe(minifyHtml())//压缩
    .pipe(gulp.dest('build'))
});

• 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'))
});

• 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'));

});
gulp.task('default',['compile-less']);