之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼.所以就赶紧去试了一下,果真可以,很高兴啊,真是为项目开发,为效果的快速展现提供了很多的便利. 实现原理: 1.修改js和css文件: 2.通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件…

本文转载自: gulp自动添加版本号…

Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: 如上图,输入node -v然后回车,看到有版本号,证明nodeJs安装成功. 接下来就是安装Gulp了: 1.首先进行全局安装gulp,如图: 安装完成后,输入gulp -v然后回车,看到有版本号,证明gulp安装成功. 2.在你的项目中安装作为项目的开发依赖(devDependencies),如…

gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 g…

gulp是基于流的前端自动化构建工具. gulp是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 二.基本用法--插件使用 gulp所支持的插件也是很多的,使用方式跟基本的nodejs差不多. 下面统一介绍几个常见的 插件 ,更详细用法可以到对应官方站点查看API sass的编译( gulp-ruby-sass ) 自动添加css前缀( gulp-autoprefixer ) 压缩css( gulp-minify-css )…

由于现在前端自动化已经很有必要了,所以我今天死皮烂脸的找了2位前端大咖帮助我安装和配置gulp,讲真,这一步步弄下来直到安装配置成功,到现在还是迷迷糊糊,不过我还是把这些步骤给记录下来,以防下次不记得,或许还可以帮助需要的小伙伴呢.哈哈哈 gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 javascript.coffee.sass.less.html/image.css 等文件的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在…

最近一个项目才接触这些自动化工具 webpack gulp grunt 等等.. webpack 可以引入模块 和 压缩 gulp 和 grunt 可以压缩 这里只说下gulp  因为项目里只用到gulp 博客园有一个猥琐大叔的一张图 我觉得还蛮不错借用下 哈哈~ 项目根目录下创建好package.json 和 gulpfile.js 这两文件 安装gulp gulp-rename gulp-uglify gulp-notify 最好全局这样比较有利复用 gulpfile.js 上的参数参照上面…

什么是gulp?   基于node的自动化构建工具   扩展:开发的时候分为2个节点一个是开发阶段  另一个是部署阶段        开发阶段:源文件不会被压缩            部署阶段:所有文件需要压缩 .gulp能干什么? 1  自动压缩JS文件 2  自动压缩CSS文件 3  自动合并文件 4  自动编译sass 5  自动压缩图片 6  自动刷新浏览器 ........... .怎么安装gulp?   因为它基于nodeJS,因此需要先安装node环境   安装完成后,打开你的命令…

gulp是前端开发过程中经常要用到的工具,非常值得花时间去掌握.利用gulp,我们可以使产品流程脚本化,节约大量的时间,有条不紊地进行业务开发.本文简单讲一下入门gulp需要掌握的东西. 安装gulp 首先,我们需要在全局安装gulp. npm install -g gulp 然后,我们切到项目根目录,在项目中也进行gulp的安装,表明项目对gulp的依赖. npm install --save-dev gulp 接着,我们在项目根目录里新建一个gulpfile.js文件,这个是gulp的配置文…

推荐使用gulp-rev + gulp-rev-collector是比较方便的方法,结果如下: "/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.example.dot/img/i…

本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下: "/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.exam…

1.打开node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash; 2.打开node_modules\gulp-rev\nodemodules\rev-path\index.js 10行 return filename + '-' + hash + ext; 更新为:…

前端自动化工具 -- gulp 使用简介 gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要packa…

前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实现静态资源的版本更新才是正道. 实际开发过程中,我们常用到的功能包括: 1.目标路径的清除: 2.静态资源复制到目标路径: 3.css文件的合并与压缩: 4.js文件的合并与压缩: 5.根据文件的变化添加版本号: 第1.2.3.4几个功能倒是很好解决,今天主要说说gulp实现静态资源自动添加版本号:…

Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安装 全局安装 $ npm install gulp -g 进入项目跟目录,初始化 npm init , 然后安装: $ npm install gulp 安装插件 sass的编译(gulp-ruby-sass) 自动添加css前缀(gulp-autoprefixer) 压缩css(gulp-clea…

前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/alferov/awesome-gulp StuQ-Gulp实战和原…

前端构建工具gulp使用   前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/alferov/awesome-gulp StuQ-Gulp实战…

前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序,…

2017春 前端自动化(二)   页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言:   此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生成css进行编译,而不是借助于考拉工具;  顺便从头来一遍流程--     建立如上图01所示的目录结构,层次明晰,便于日后管理. 快捷键进入当前文件夹,在此打开dos窗口输入:node -v,显示node版本,说明node之前已经安装好(之前已经介绍安装方法)   之后安装 cnpm,为了日后安装…

前端自动化之gulp 前题:1.安装好nodejs环境,或者nvm 2.安装npm包管理工具 简介: 可以自动的将开发阶段的代码进行压缩.合并.编译.加密等处理,生成项目提交的代码. 使用: gulpfile.js文件编写的api较少,只有5个,可查看api自行编写. http://www.gulpjs.com.cn/docs/api/ 用npm下载gulp插件: "browser-sync": "^2.18.13", "gulp-autoprefixer…

web应用必然要面对缓存问题,无论前台后台都会涉足缓存.特别是对于前端而言,缓存利用的是否得当直接关系到应用的性能. 通常情况下,我们会倾向于使用缓存,因为缓存一方面可以减少网络开销,一方面可以减轻服务器的压力. 但是有些时候缓存也会带来一些比较诡异的问题,呵呵.关于缓存的文章应该不在少数,不再讨论,本文的重点在于为js和css文件自动添加版本号. 这样做的原因是:首先对于js和css类型的静态文件设置了缓存机制,当文件被更新时,需要强迫浏览器下载修改后的新文件,也就是要更新缓存,而通过为js和…

一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是基于node环境的,那么什么是 node.js呢,下面是官方的解释Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包管理器 npm,是全球最大的开源库生态系统. 用…

https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要修改调整并压缩处理,这时候我们就会用到我们的<前端自动化神器 (Gulp)>,鉴于 gulp 的内容比较多,为了不打乱 Metronic 系列,就单独列了一篇<初探前端自动化神器 (Gulp)>.本文不对 gulp 进行详细阐述,只保留和 Metronic 相关部分. Gulp is…

前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/alferov/awesome-gulp StuQ-Gulp实战和原理解析 http://i5…

1.基本介绍 gulp.js是一个自动化构建工具,是自动化项目的构建利器.可以对网站的资源进行优化,将开发过程中一些重复的任务通过执行命令自动完成.这样能很大的提高我们的工作效率. gulp.js是基于Node.js构建的,利用Node.js流可以快速的构建项目,例如能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定等. 2.自动化构建工具 gru…

在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的.有意义的工作,比如设计业务逻辑,编写代码等等. 对很多前端开发人员而言,Grunt 无疑是这方面的首选.基本上,如果你会用 JavaScript ,那么在一个名为 Gruntfile.js (或者 Gruntfile)的文件中用 Javascript 语言定义自动化任务是非常简单的过程,同时大量的…

http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/al…

前几天刚鼓捣了Grunt的使用,结果文档还没捂热,老大说我们还是用gulp吧,搞得我又得来整gulp,眼泪流成河了,真是不晓得底层人民的辛苦啊.不过经过对gulp的学习,发现很好用,比grunt舒服! gulp是一个前端自动化构建工具,与grunt类似,但相对grunt而言gulp更好用.好处是无需写一大堆繁杂的配置参数,API也相对简单很多,学习起来很比grunt容易很多,而且gulp使用Nodejs中流(stream)来读取和操作数据,其速度更快,减少频繁的 IO 操作. 下面是学习过程中的…

@羯瑞 整理 前言 前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具.有的工具提供的功能还是非常强大的. FIS.百度团队的产品.现在百度的多个产品中使用.面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题.学习成本相对比较高.官网 CodeKit.自动编译Less, Sass, Stylus, CoffeeScript, Jade & Haml等文件致…

2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp的安…