打包工具可以更好的治理html,css,javascript,使用可以锦上添花,不使用也没关系。
前端三剑客:结构层 html,显示层 css,行为层 javascript。
html好比是屋子的地基,css和 javascript是屋子的建筑材料,这三个部门一起组成个漂亮的屋子。我们不能把他们离开说,某某部门是个屋子,只有三个一起才气组成一个漂亮的屋子 。
这几年,javascript 生长异常快速,特别是在2015年,更是有一个质的飞跃。
说到 JavaScript,就要说下Web尺度的组织协会,ECMA,它是“European Computer Manufactures Association”的缩写,中文称 欧洲计算机制造联合会,1961年确立,旨在确立统一的电脑操作花样尺度--包罗程序语言和输入输出的组织。
2015年,JavaScript 引入许多新的语法糖,而且制订历程当中,另有许多组织和小我私家不停提交新功效。事情很快就变得清晰了,不能能在一个版本内里包罗所有将要引入的功效。
通例的做法是先公布 6.0 版,过一段时间再发 6.1 版,然后是 6.2 版、6.3 版等等 ,这个2015年之前 JavaScript 现在习惯称为ECMAScript5,而之后称为ECMAScript6。
尺度委员会商定后最终决议,尺度在每年的 6 月份正式公布一次,作为昔时的正式版本。接下来的时间,就在这个版本的基础上做改动,直到下一年的 6 月份,草案就自然变成了新一年的版本。这样一来,就不需要以前的版本号了,只要用年份符号就可以了。
因此,ES6 既是一个历史名词,也是一个泛指,寄义是 5.1 版以后的 JavaScript 的下一代尺度,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年公布的正式版本的语言尺度。本书中提到 ES6 的地方,一样平常是指 ES2015 尺度,但有时也是泛指“下一代 JavaScript 语言”。
回覆:从现在的角度来看,二者是可以交换的。即ECMAScript是JavaScript ,JavaScript 是ECMAScript。
回覆:ECMAScript 6泛指下一代 JavaScript 语言,ECMAScript 2015指的是 2015年的 JavaScript 尺度;
总结
// es6 泛指下一代 JavaScript 语言,那时部门人也会以为特指ES2015 ECMAScript6.0 = ECMAScript2015 = es2015 = es6(部门人会这么以为) ECMAScript6.1 = ECMAScript2016 = es2016 = es7(部门人会这么以为) ECMAScript6.2 = ECMAScript2017 = es2017 = es8(部门人会这么以为)
很尴尬的是,JavaScript生长很快,然则浏览器跟不上剧本更新的进度。一方面给出了尺度,一方面却不能直接在浏览器上使用。
这就泛起了 Babel,Babel自称是 JavaScript 编译器,它的作用就是将ES6新语法转成ES5,即现在浏览器可识别的剧本(基本现在是针对老版 IE 内核)。
然则使用 Babel 编译也有缺陷,那就是每一次保留,都需要手动的使用命令行编译,而且编译历程中还需要相关联的包配合使用,很繁琐。以是,打包工具就泛起了,它可以辅助做这些繁琐的事情。
仅先容 4 款主流的打包工具:grunt , gulp,webpack, rollup,以公布时间为顺序。
Grunt:MPA,老牌打包工具,基于文件为前言(运行慢,零星的剧本文件一当多起来就受到影响
Gulp:MPA,易学,基于 nodejs 的 steam 流打包
Webpack:SPA,现在最壮大的打包工具,然则过于臃肿,若何单纯打包js不推荐
Roleup:MPA,tree-shaking特征(针对es6,按需打包,多余的不要,现在(2018,vuex,react主流使用)
若是你一个都不熟悉的话,那么我直接推荐 webpack,官方文档异常详细,更新频率很高。而且在其他的打包工具在处置非网页文件(好比svg, png, vue等)基本照样需要借助它来实现。最要害现在的脚手架主流依旧是它。
若是在处置文件需要关注前端三剑客的话,那么 grunt 和 gulp 会更好点,这两者我直接推荐 gulp,除非你已经很熟悉 grunt了。
若是你加倍在意剧本代码的简练精炼,那么可以使用rollup
若是你还要加倍精炼一点,这里新出来一个新的打包工具,免插件式parcel
在打包上,我小我私家注重的是设置从简朴到庞大,以是我离开使用。
css 打包选择了gulp,2个义务,3个插件,有一个插件是为了编译scss,若是直接使用css,那么这个插件也可以去除。
// 义务一:编译 gulp.task('compile', function () { return gulp.src('src/scss/*.scss') .pipe(sass({outputStyle: 'expanded'})) // 插件一:编译scss .on('error', showError) .pipe(autoprefixer({ // 插件二:自动添加浏览器前缀 browsers: ['> 1%', 'last 4 versions'], cascade: false, remove: true })) .pipe(cleanCss({ // 插件三:压缩样式 compatibility: 'ie8', format: 'keep-breaks' })) .pipe(gulp.dest('../dist/css')); }) // 义务二:考察 gulp.task('watch', function(){ gulp.watch('src/scss/*.scss', ['compile']) })
ECMAScript 小我私家现在基本使用es6,以是在打包剧本上我选择了rollup,只提取有用的代码,设置上参考react官方设置文档
import resolve from 'rollup-plugin-node-resolve'; import babel from 'rollup-plugin-babel'; import commonjs from 'rollup-plugin-commonjs'; import { eslint } from 'rollup-plugin-eslint'; import { uglify } from 'rollup-plugin-uglify'; const env = process.env.NODE_ENV; console.log('当前环境:%s', env); const configs = [ { input: 'src/js/index.js', output: { file: 'dist/js/index.js', format: 'umd', name: 'atom', banner, sourcemap: true } } ] const plugins = [ eslint({ // 检测js代码语法花样 formatter: 'codeframe', include: [ 'src/js/**/*.js' ] }), resolve({ // 提取所依赖的代码 jsnext: true, main: true, browser: true, module: true }), babel({ // 编译es6 -> es5 exclude: 'node_modules/**' // 只编译我们的源代码 }), commonjs() // 将commonjs 转成 es6 ] export default configs.map(v => { v.plugins = plugins if (env === 'development') { v.watch = { // 监听剧本的转变 include: 'src/js/**', exclude: ['node_modules/**'] } } if (env === 'production') { v.plugins.push( uglify({ // 压缩剧本 compress: { pure_getters: true, unsafe: true, unsafe_comps: true, warnings: false } }) ) } return v });
html 小我私家不做任何处置,可以在上线压缩削减文件的体积,压缩直接使用gulp
// 义务一 gulp.task('testHtmlmin', function () { var options = { removeComments: true,//消灭HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css" minifyJS: true,//压缩页面JS minifyCSS: true//压缩页面CSS }; gulp.src('src/html/*.html') .pipe(htmlmin(options)) // 使用gulp-htmlmin插件 .pipe(gulp.dest('dist/html')); });
来自:https://segmentfault.com/a/1190000019434666
1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入
2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动,优惠券领取点击进入
3.广告同盟: 整理了现在主流的广告同盟平台,若是你有流量,可以作为参考选择适合你的平台点击进入
链接: http://www.fly63.com/article/detial/3628