前端压缩工具
来源:互联网 发布:eventbus 跳转传数据 编辑:程序博客网 时间:2024/06/08 16:06
介绍一下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']);
阅读全文
0 0
- 前端压缩工具
- web前端开发必备压缩工具整理
- 前端压缩工具 YUI Compressor 对比 Minify
- WEB前端优化必备压缩工具YUI-compressor详解
- 图片压缩工具
- js压缩工具
- 图片压缩工具
- javascript 压缩工具
- Javascript压缩工具
- JS压缩工具
- gzip压缩工具
- 压缩工具类
- xz压缩工具
- 图片压缩工具
- AsPack压缩工具
- 文件压缩工具
- 图片压缩工具
- 图片压缩工具
- a标签中href与onclick执行先后问题
- SSH远程登陆centos虚拟机的方法
- java设计模式(八)——外观模式
- 《一个操作系统的实现》笔记(2)--保护模式
- HDU5521:Meeting(最短路 & 集合点互达)
- 前端压缩工具
- MySQL添加用户
- 继承之乐趣
- sql语法通配符
- 《一个操作系统的实现》笔记(3)--中断和I/O保护
- 一个基于树莓派和Python的无人机视觉跟踪系统
- 零基础入门深度学习(6)
- Karaf教程第1部分 安装Karaf与第一个应用
- 快速排序算法