gulp
gavid0124
java从业者
前端架构师
展开
-
Gulp开发教程(翻译)
Building With Gulp===================原文地址翻译出处原创翻译,有不当的地方欢迎指出。转载请指明出处。谢谢!对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用正确的工具自动完成,从而使效率大大提高,这是让很多开发者觉得有趣的地方。Gulp是一个构建系统,它能通过自动执转载 2015-08-30 15:28:34 · 564 阅读 · 0 评论 -
前端构建工具gulpjs的使用介绍及技巧
前端构建工具gulpjs的使用介绍及技巧gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧。本文导航:gulp的安装开始使用gulpg转载 2016-12-19 17:53:35 · 350 阅读 · 0 评论 -
gulp使用总结(不加return后果很严重)
为了成为一名稍微专业一些的前端开发,我觉得自己了解并使用工具来自动构建前端代码还是很有必要的。工具很多,虽然grunt是一个大伙都说还不错的工具,插件也比较丰富,但gulp是号称要替代grunt的工具,有不少的优点,例如上手简单,代码短,本身就是配置文件,流式处理效率高,看到得错误的行号提示等等,对于两者都没有接触过的人来说,还是用gulp吧。于是元旦在家里没事就折腾了一下。以下是我的使用过程。转载 2016-12-26 16:01:55 · 6380 阅读 · 1 评论 -
gulp使用小结(一)
这篇文章不会介绍 gulp 的起源、发展;不会去一个个讲解 gulp API;也不想出现大段大段的 gulpfile.js 代码;更木有帮你分析 gulp 实现原理,只有一些我自己对 gulp 的使用理解和总结。如何通过 gulp 让偶们的前端项目高大上的跑起来?gulp 能做什么,还能做什么?gulp套路能不能来几套?... 希望通过这篇文章你会找到答案写作风格的原因转载 2016-12-26 15:08:18 · 1455 阅读 · 0 评论 -
gulp实现前端静态资源的压缩,加MD5戳,替换引用,加CDN前缀
之前一直在使用grunt,总感觉grunt的参数配置方法很繁琐,没有一个比较清晰的流程,加上自己对gulp的流操作比较感兴趣,就决定转战gulp了。相信前端er在发布自己的代码时如果不使用前端一些构建工具的话,对频繁上线的项目来说,自己手动压缩打包替换CDN前缀那是一件多么恐怖的事情!所以采用gulp前端构建工具是一个非常明智的选择。首先来说说发布项目时前端需要进行哪些转载 2016-12-23 17:09:59 · 3640 阅读 · 0 评论 -
gulp下静态资源的合并、压缩、MD5后缀
var gulp = require('gulp'); var RevAll = require('gulp-rev-all'); var uglify = require('gulp-uglify'); var filter = require('gulp-filter'); var csso = require('gulp-csso'); var useref =转载 2016-12-23 17:07:05 · 1285 阅读 · 0 评论 -
常用gulp插件介绍(二)
Angular相关这个部分介绍与Angular相关的一些插件。gulp-angular-templatecacheAngular自带的$templateCache服务可以把Angular中用到的所有模板缓存下来,而这个插件的功能就是直接将指定的HTML模板文件以JS字符串的形式注册在$tempalteCache服务中,这样所有的模板就会随JS文件直接一次性下载下来。这个插件使用起来转载 2016-12-23 16:04:49 · 1873 阅读 · 0 评论 -
常用gulp插件介绍(一)
在写generator-aio-angular的过程中,gulp这一块发现了很多非常实用的插件,大大的增加了能自动化的范围,这篇文章就分门别类的简单介绍下常用的gulp插件吧。util工具类这个分类下主要介绍一些辅助工具类的插件。gulp-load-plugins顾名思义,本插件的功能就是帮你自动require你在package.json中声明的依赖。只要一句var转载 2016-12-23 16:03:59 · 2868 阅读 · 0 评论 -
Gulp:静态资源(css,js)版本控制
为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源; 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录结构 html模板文件 12345678转载 2016-12-23 10:11:24 · 2742 阅读 · 0 评论 -
Gulp新手入门教程
Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务:搭建web服务器文件保存时自动重载浏览器使用预处理器如Sass、LESS优化资源,比如压缩CSS、JavaScript、压缩图片当然Gulp能做的远不止这些。如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器。Gulp真的足够强大,但你必须学会驾驭它。这是这篇文章的主要目的。帮助你了解Gulp的基础用法,助你转载 2016-12-23 09:54:41 · 1292 阅读 · 0 评论 -
前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
原理修改js和css文件通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)替换html中的js,css文件名,生成一个带版本号的文件名方案现在网上的方案都是生成一个新的dist目录,里面包含了要发布的html,js,css等文件。但是在实际的公司的项目中,会有情况不能生成新的HTML进行转载 2016-12-22 11:07:23 · 3035 阅读 · 3 评论 -
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/im转载 2016-12-16 10:32:07 · 1624 阅读 · 2 评论 -
gulp实例
var gulp = require('gulp'), runSequence = require('run-sequence'), gulpif = require('gulp-if'), uglify = require('gulp-uglify'), less = require('gulp-less'), csslint = require('gulp-csslint'), r转载 2016-12-16 10:31:03 · 735 阅读 · 0 评论 -
gulp的安装教程,使用教程,和简单的自动化任务教程
系统:win10 终端工具:cmder(或使用系统终端:win+R -> 输入cmd -> 回车) gulp官网地址:http://www.gulpjs.com.cn/ gulp中文文档:http://www.gulpjs.com.cn/docs/ gulp插件地址:http://gulpjs.com/plugins gulpAPI地址:http://www.gulpjs.co转载 2016-12-20 10:26:43 · 605 阅读 · 0 评论