使用构建工具之前我觉得前端好蠢,css没有变量,不能写循环,为了兼容要写好多前缀,hmtl写多页面中有同一个header,我就粘贴复制,然后修改的时候每个都要改. 我还不会压缩和合并,每次都要按F5刷新.其实这些问题也是网页优化的问题. 构建工具正是解决这些问题的集合.虽然网上gulp和webpack的教程很多,我还是根据自己的需求整理了一下. gulp安装: https://markgoodyear.com/2014/01/getting-started-with-gulp/ webpack安…

通过参考网上的一些构建方法,当然也在开发过程中进行了一番实践,最终搭建了一套适用于当前多页应用的构建方案,当然该方案还处于draft版本,会在后续的演进过程中不断的优化. 个人觉得该方案的演进过程相对于成果而言更值得记录.但在此之前,我们先简单介绍下项目的整体架构,这样大家会更明白为什么要采用这样的构建方式.下图列出了用户在浏览器中输入url到页面ready的过程,可以看出这是一个典型的服务端直出架构,其中作为前端工程师的我们主要关注点是放在浏览器端以及Node层.在Node层,我们对koa的进…

修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例子,讲解多页面项目中如何利用gulp和webpack进行工程化构建.本文是自己的实践经验,所以有些解决方案并不是最优的,仍在探索优化中.所以有什么错误疏漏请随时指出. 使用gulp过程中的一些问题,我已经在另外一篇文章讲到了 grunt or gulp 前言 现在为什么又整了一个webpack进来呢…

为了节省http请求次数.节约带宽,加速页面渲染速度,达到更好用户体验的目的.现在普遍的做法是在上线之前做静态资源的打包构建,也就是静态资源的合并压缩: 这里使用的是gulp,当然现在有更强大的模块化构建工具webpack,大家可以尝试一下,但是不管用什么工具,只要能解决对应的问题,就是好工具: 大家注意,使用gulp需要先安装node哦,具体安装教程请百度一下 完整的配置和demo在github上:https://github.com/hj1226104386/gulp-workflow.gi…

随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目,网上的相关教程也比较多:相对来说使用gulp来构建es6项目的中文教程就比较少. 经过一段时间的摸索,我觉得其实使用gulp也可以很方便地构建es6项目.以下是我感觉gulp和webpack主要的不同之处: gulp的任务机制和流式管道函数和webpack的…

1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_32312635/article/details/71706145 (Gulp和Webpack对比) 3.http://blog.csdn.net/OLiver_web/article/details/53966774 (前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpa…

一:PostCss是什么?  PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本,最后通过编译将源码转换为目标浏览器可用的css代码. 它和stylus的不同之处是它可以通过插件机制灵活地扩展其支持的特性,不像stylus的语法是固定的,它的用途非常多,比如css自动加前缀,使用下一代css语法等等. postcss官方有很多插件,查看插件(https://github.com/…

最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入…

制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开的api来做项目.不过本章节不涉及调用接口等内容.这里,我们假设我们的项目是做俩页面,一个列表页面,一个内容页面.列表页面有分页等,内容页面展示. 因此,我们需要两个模板文件. 我们在src/page目录下面新建两个文件,分别是index.vue和content.vue index.vue代码: <…

深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpack? 4. 使用loader 5. 使用插件(Plugin) 6. 使用DevServer 二:webpack基本配置 1. context 2. entry 3. Output 4. 模式(mode) 5.理解使用Loader 6.理解noParse 7. 理解alias 8.理解extensi…