文章列表
jacksun 于 18天前发表 226 0 0
[http://7tszky.com1.z0.glb.clouddn.com/FjYR3cMOwYdo-u9ApjlUUt2815n7]
18天前
构建工具
林鑫 于 1个月前发表 427 4 0
本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp。不定期更新。可以到github上面下载DEMO。 * 博客地址: blog [https://github.com/lin-xin/blog/issues/2] * demo地址: gulp-plugins [https://github.com/lin-xin/gulp-plugins] 匹配符 *、**、!、{} gulp.src('./js/*.js')// * 匹配js文件夹下所有.js格式的文件 gulp.src('./js/**/*.js')// ** 匹配js文件夹的0个或多个子文件夹 gulp.src(['./js/*.js','!./js/index.js'])// ! 匹配除了index.js之外的所有js文件 gulp.src('./js/**/{omui,common}.js')// {} 匹配{}里的文件名 文件操作 DEL (替代GULP-CLEAN) var del = require('del');
1个月前
构建工具
moonye 于 2个月前发表 649 0 0
WEBPACK热更新配置 热更新,可以使开发的人在修改代码后,不用刷新浏览器即可以看到修改后的效果。而它的另一个好处则是可以只替换修改部分相关的代码,大大的缩短了构建的时间。 热更新一般会涉及到两种场景下面的使用,一个是项目属于纯前端资源的,另一种是node工程项目。 纯前端资源配置 完整工程项目可参考github上面 demo [https://github.com/moonye6/webpack-hot-test1] 配置或者 官方示例 [https://webpack.js.org/guides/hmr-react/] 配置过程内容比较多,这里大致描述下实现热更新能力需要做些什么。 首先安装相关的包,会发现热更新的能力主要是 webpack-dev-server 实现,它提供一个本地服务器,并且在内容发生变化时更新浏览器内容。而 react-hot-loader 主要作用是重刷react组件,非react项目中不要,这样配置又简化了。 然后在构建的配置文件中需要做一些配置,该配置作用是将热更新所需要的代码注入到入口js文件中
2个月前
构建工具
吴浩麟 于 3个月前发表 3334 2 0
[http://7tszky.com1.z0.glb.clouddn.com/FnewH1hoBQjJKWzMazCkmSrPxOSb] webpack是当下最流行的js打包工具,这得益于网页应用日益复杂和js模块化的流行。 webpack2 [https://webpack.js.org] 增加了一些新特性也到了预发布阶段,是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 优化输出 打包结果更小可以让网页打开速度更快以及简约宽带。可以通过这以下几点做到 压缩CSS css-loader 在webpack2里默认是没有开启压缩的,最后生成的css文件里有很多空格和tab,通过配置 css-loader?minimize 参数可以开启压缩输出最小的css。css的压缩实际是是通过 cssnano [http://cssnano.co] 实现的。 TREE-SHAKING
3个月前
构建工具
jerytang 于 3个月前发表 1122 1 1
代码压缩的现状 下面是一个使用 react 的业务的代码依赖,但是实际上业务代码中并没有对依赖图中标识的模块,也就是说构建工具将不需要的代码打包到了最终的代码当中。显然,这是很不合理的。 unneed_deps [http://pub.idqqimg.com/pc/misc/files/20161230/31607a2f657c4086adbf1bfd98063934.png] $webpack--profile--json--configwebpack/config.common.js > stats.json$#将stats.json上传到http://alexkuz.github.io/webpack-chart/可视化entry的依赖 随着 es6 的普及使用,由于 es6 的 模块是语言层面支持的,方便做静态分析,让进一步的代码优化成为可能,也就是我们今天要讨论的 tree-shaking。
3个月前
构建工具
黄龙 于 3个月前发表 556 0 0
不清楚fis3是什么的可以先看这个链接 http://fis.baidu.com/ [http://fis.baidu.com/] 背景 从fis的官方文档上看,fis 除了deploy 插件是支持异步的其它都不支持。但是有好多node包 都是异步,怎么才能让fis支持异步插件呢? 举个例子 最近看到有一个 gulp-lzmajs [https://github.com/andot/gulp-lzmajs] 的插件,我尝试把它改成fis3插件。 接下来我们要思考下面几个问题 1. 做什么阶段的插件? 2. lzma库是异步调用的,怎么处理? 第一个问题:fis3把构建分成了三个阶段【编译】【打包】【发布】,当然我们只希望所有文件打包好之后再做js文件的lama压缩,所以做打包阶段的插件,扩展postpackager 第二个问题:我们需要一个很神奇的包 deasync DEASYNC github: https://github.com/abbr/deasync [https://github.com/abbr/deasync] 用法:
3个月前
构建工具
江源 ,非常让人头疼…… 于 8个月前发表 1049 1 0
原文http://jiangyuan.me/blog/2016/08/13/babel/ [http://jiangyuan.me/blog/2016/08/13/babel/] 最近总算有点时间能系统的梳理下 babel 。入门或者使用手册什么的直接查看“ 参考文章 [#wafaha] ”即可,我只说说我的理解。 插件 Babel is built out of plugins. * babel-core 只是个插件加载器, presets 是一组插件,避免繁琐地一个一个安装插件。 * preset es2015 [http://babeljs.io/docs/plugins/preset-es2015/] 可以很好的编译 es6 ,唯独对常用的 class property 无能为力,快使用插件 Class properties transform [http://babeljs.io/docs/plugins/transform-class-properties/] 。
8个月前
构建工具
黎清龙 于 8个月前发表 2115 0 0
WEBPACK 学习小结 1 前言 打包,本质来说就是把许多零散的文件有序的合并成为一个文件,达到前端优化的效果 它的前世今生就不说了,感兴趣的同学可以去学习相关知识 构建 != 打包,反之亦然 打包可以说是构建的一环,构建可以做更多的事情 但是,打包永远都是构建的一个核心 1.1 相关工具 打包工具有很多,下面稍微介绍一下笔者认识的: 1.1.1 GRUNT 准确来说,grunt 是个构建工具 它只是提供了一些基础能力,出现的较早,社区强大 1.1.2 GULP gulp 和 grunt 很像,就不多聊了 1.1.3 FIS 可以说,fis 比较大,对整个打包过程有一个核心规范和流程,并且总结并提供了打包构建中的3个核心能力 fis 是一个很值得去学习的构建框架 1.1.4 WEBPACK 这个应该是目前最受欢迎与关注的工具了 就个人学习而言,相比其他工具,webpack 是一个专注于打包的工具,因为专注,所以强大 2 打包原理 打包过程实际上很简单,也非常直观,其逻辑如下图所示:
8个月前
构建工具
黄龙 于 1年前发表 1841 0 1
名词介绍 webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片Riot的tag文件等都作为模块来使用和处理。我们可以直接使用 require(XXX) 的形式来引入各模块。 Riot是一个类似React的微型 UI 库,具体可以见 【微型UI库Riot介绍】 [http://imweb.io/topic/56fd61d2b4a205f5063ee056] Redux 是 JavaScript状态容器,提供可预测化的状态管理。 配置项目 1.首先创建package.json文件 mkdir riot-redux cd riot-redux npm init 2.安装 给package.json添加依赖描述 ... "scripts": { "dev": "webpack-dev-server" }, ... "dependencies": { "babel-core": "^6.3.17", "babel-loader": "^6.2.0",
1年前
构建工具
袁飞翔 于 1年前发表 1328 3 1
部分插件 * fis3-hook-lego [https://github.com/imweb/fis3-hook-lego] 查找文件 * fis3-hook-annotation [https://github.com/imweb/fis3-hook-annotation] 文件注解 TIP 1、勿使用LEGO_MODULES文件全路径 <scriptsrc="/lego_modules/zepto/1.1.7/zepto.js"></script> 直接 <scriptsrc="zepto"></script> js require: // js/** * @require "zepto" */ 2、不需要被DEFINE包裹的文件使用 @NOWRAP 文件注解标示 /** * @noWrap */// ..file code 3、默认不对LEGO_MUDLES下的文件做BABEL,特殊文件需要使用 @ES6 标示 /** * @es6 */// ..file code 4、不需要加HASH的图片放置 */IMG/NOHASH/ 目录下
1年前
构建工具
helinjiang 于 1年前发表 1652 1 0
最近写了两个Grunt插件( grunt-htmlstamp [https://www.npmjs.com/package/grunt-htmlstamp] 和 grunt-file-modify [https://www.npmjs.com/package/grunt-file-modify] ),已经用在自己的项目中,用得很开心。本文便是记录了Grunt插件开发的一些关键的点,作为笔记,比较简明扼要,更适合对Grunt有一些了解的同学,一些基础的知识请自行 Google 之。 本文中的演示在 windows 操作系统中,Linux 或 OS X 可能有一些小区别。 一、环境准备 1. 安装 NODE.JS 在 Node.js 官网 [https://nodejs.org/] 选择合适的版本下载并安装。安装完成之后,打开 cmd 命令窗口,输入 node -v ,如输出版本号,则证明安装成功。 2. 安装 GRUNT-CLI
1年前
构建工具
袁飞翔 于 1年前发表 1530 3 0
首先看一个有趣的问题 // fis-conf.js fis.hook('commonjs') .match('/modules/common/utils', { isMod: true, moduleId: 'utils'// 为utils设置一个moduleId,希望以后能直接require('utils') }) .match('::package', { postpackager: [ fis.plugin('loader', { resourceType: 'commonJs' }) ] }) <!-- main.html --><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><!-- etc.. ---><script>require('utils')
1年前
构建工具