前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓存问题,于是老总多次要求得解决这个问题,不能每次遇到这个问题,你去叫客户清下缓存.于是我就在找解决问题的方法,一开始是想着如何可以动态的给引入的文件后面加上时间戳参数,试了一下貌似不行,就选择花时间去研究gulp打包工具了,这样既可以解决浏览器缓存的问题,也可提高代码的安全性! 环境安装: 首先,安

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

最近公司的项目一直使用gulpfile打包,项目会有三种项目打包(生产环境)和监听(开发环境)两种过程,同时需要清除文件夹,希望打包时增加提示以便区分,暂时分为上述三种提示打包.监听.清除. 先上code gulp.task('clean', function () { console.log('\033[41;37m CLEAN \033[40;31m 完成清除\033[0m') return gulp.src('dist').pipe(clean()) }) gulp.task('auto'

因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不管怎么说,需要亲自用过gulp之后才能品评他和grunt之间的优劣.不废话,直接上实例. 本人自建了一个前端目录结构,后续的例子都是以这个目录结构为准.dest是我们打包压缩结果保存目录,现在是空的.以后每完成一个实例,我们就会清空一下dest目录,保证下一个实例的结果和实例代码对应. 1. 第一个

在我前面的文章中,总结了一下自己学习webpack和gulp的一些东西.然而,在我的实际项目中,单独使用它们两者不能满足项目的需求.我遇到了下面的一些问题. 问题1: 因为我的图片需要放单cdn上面去.而我们知道,webpack中,如果是大于8K的图片,它是没有转化为base64的,而且html中引入的图片实际上是会被打包到js当中,因此我需要手动去改那些图片的路劲.比较麻烦 问题2: 虽然webpack在打包的过程中会自动帮你把css,js的路劲引入到html中,但是我在打包之前,我还是要自己

问题: 当我们版本更新的时候,我们都要清理缓存的js跟css,如何使得在网页中不需要手动清理呢? 答案: 生成带有哈希后缀的js跟css文件 1.文件路径 路径中的conf.js 是用于放置全局打包的公共方法的. conf.team.json 则是用于放置 team 这个项目的打包路径 . gulpfile.team.js 用于写 team 这个项目的打包. 打包前的文件放在build中.打包后的文件放在dist中 总的打包任务在webapp 根目录下 为什么要这样放置目录,请看 gulp分流

问题: 当我们一个工作台里面有好几个项目的时候,我们要为项目的前端资源进行打包,但是,gulpfile只有一个,如果我们把所有的打包都放在同一个文件里面,首先文件会越来越大,而且不便于管理,这时,我们就需要对打包进行分类,一个项目一个打包文件,但是我们又想实现一键打包,那么怎么办呢? 解决: 使用gulp-require 引入各个项目打包文件 首先我们在打包目录下面新建一个build文件,用于管理全站的打包 里面新建三个文件,分别为 然后在gulpfile.js 里面 "use strict&q

问题: 当一个工程里面有好几个项目,每个项目引用同一个包,但是不同的名字,例如在bower中 fancybox 跟 jquery.fancybox 是一样的,我们只需要下载其中的一个版本,而打包工作不是同一个人写的,因此要写如注释,但是bower的配置文件里面不许有注释,那怎么办呢? 解决方法: 使用gulp来生成bower.json 文件 首先我们在Gulpfile.js 文件中 "use strict"; let gulp = require('gulp'); let modify

来新公司工作的第五个月.整站资源打包管理也提上了日程. 问题: 首先.什么是整站的打包管理呢? 我们公司的几个重要产品都在同一个webapp里面,但是,不同的开发部门独立开发不同的产品,长期以来,我们就不知道其他部门的在做什么,或许我们正在头疼的问题,隔壁部门已经早早解决了呢? 各个部门的前端资源也是到处都是.难以管理.于是就提出了整站资源共享.整站资源共享的前提就是资源打包能统一.在几个产品里面.既有使用grunt的也有使用glup的,各个产品引入的包的版本也不一样. 目标: 统一打包工具 对

这篇文章讲我整理的一种打包项目的方式,以下是我的依赖清单 "devDependencies": { "gulp": "^3.9.1", "gulp-asset-rev": "0.0.15", "gulp-clean-css": "^2.1.3", "gulp-htmlmin": "^3.0.0", "gulp-noti

1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 2.gulp构建 前端构建流程: 开发->分析->测试->编译->发布部署 一段简单的基于gulp的项目构建代码,gulpfile.js内容如下所示: gulp.task('default',function(){ return gulp .src(&quo

1.安装node.js  下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node  -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm install -g cnpm --registry=http://registry.npm.taobao.org目的:使下在速度更快.3.全局安装gulp cnpm install --global gulp4.创建目录,打开F盘,创建gulp文件夹.命令行输入 :f:cd gulp5.安装本地gu

使用Browserify打包js时如果项目变得越来越大,编译时间就会相应变得越来越长.使用官方的插件watchify是个比较有效的提高速度方案. 提速原理 watchify的用法和gulp的watch方法比较类似,都是监控文件的改动来触发一些操作.在gulp中我们可以把一个完整的任务拆分成很多个局部任务,然后使用gulp.watch对这些局部任务进行监听,例如: gulp.task('build-js1', ...); gulp.task('build-js2', ...); gulp.task

30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解babel-loader加载器的含义 六:了解下webpack的几个命令 七:webpack对多个模块依赖进行打包 八:如何独立打包成样式文件 九:如何打包成多个资源文件 十:关于对图片的打包 十一:React开发神器:react-hot-loader 回到顶部 什么是webpack? 他有什么优点?

最近闲游时间比较多,于是想搞个网站练练手,首先选域名在godday里选了个518shengmao.com,买了个1元的阿里云服务器,接下来程序了. 采用vue+nodejs来开发的 一.NodeJs环境安装与配置 关于什么是NodeJs就不详细介绍,简要说明,它就是用javascript 方式去操作系统资料的一个开发环境.是一个桥梁平台. 大家可以去官网下载最新版本的,安装后进行环境变量的配置. 下载>  NodeJs  选择左边绿的下载安装就可以 关于环境变量的配置,百度搜索很多, 点击这里去

项目地址:https://pan.baidu.com/s/1cu4WW2 之前已经说过多入口打包,最近正好做一个单页面应用,之前多人口是用webpack打包的,但是感觉webpack比较重,单页面我又用回gulp了,主要就是js文件的合并,然后css默认就是一个css文件,然后发布的时候添加了版本号,还是比较简单的,下载下来项目后,找到gulpfile.js把里面的proname改成你的项目的名字,然后把gulpConcatScript方法内改成你需要合并的js,这里面我默认合并后生成一个mai

转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://github.com/HRFE/blog/issues/10 从进公司到现在,我们前端组一直秉承的是模块化开发,PC 页面我们用的是requirejs对模块化代码进行管理,H5用的是webpack.只是原先都是做伸手党,至于其中的原理没有深究过,今天趁着有时间,就好好来扒一扒requirejs,下次抽空再来深

React自发布以来吸引了越来越多的开发者,React开发和模块管理的主流工具webpack也被大家所熟知.那么webpack有哪些优势,可以成为最主流的React开发工具呢? webpack是什么 CommonJS和AMD是用于JavaScript模块管理的两大规范,前者定义的是模块的同步加载,主要用于NodeJS:而后者则是异步加载,通过requirejs等工具适用于前端.随着npm成为主流的JavaScript组件发布平台,越来越多的前端项目也依赖于npm上的项目,或者自身就会发布到npm

今天不讲webpack,就说说gulp是怎么进行压缩合并打包 首先你的安装gulp : npm install gulp -g --save-dev 然后最基本的你因该知道gulp 的四个方法, gulp.src:读取文件 gulp.pipe:将文件流输入到指定的文件目录 gulp.task:建立gulp任务,例如合并,压缩,清除文件, gulp.watch:用于监听文件的变化 关于其他的嘛,那就是gulp 之所以那么强大,原因就是他有很多插件,我们要完成一些功能就必须要学会使用一些插件 1)在

其他的和打包前一篇随笔(打包js) http://www.cnblogs.com/teersky/p/7251329.html 相同,本篇文章主要写gulpFile.js的配置: 安装CSS打包插件: cnpm install gulp cnpm install gulp-minify-css 之后新建gulpfile.js文件 //打包cssvar gulp =require ("gulp") var minifyCss=require ("gulp-minify-css&