【Gulp自动化工具点滴知识 】
barnett_y
成功道路并不拥挤,因为坚持的人不多。。。
展开
-
基于Gulp的前端自动化工程搭建
准备工作安装Node首先Gulp是基于Nodejs的,所以安装Nodejs是前提,Node可以说是前端神器,基于Node有各种各样的工具,正是因为这些工具让我们非常方便的构建前端工程。更改Node插件默认安装位置(非必需)我自己一般不喜欢在C盘状太多与系统无关的东西,而通过Node自带的npm安装的插件默认在C盘,但是我将Node安装到D盘后,想让插件就安装在Nod转载 2016-09-13 09:00:13 · 1073 阅读 · 0 评论 -
gulpJs使用总结
1.gulp安装1.首先确保你已经正确安装了nodejs环境。然后可以全局方式安装gulp:$ npm install -g gulp我们可以检查一下gulp版本$ gulp -v这样就完成了对全局的安装2.如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上--save-dev:$ npm install --save-dev原创 2017-02-23 18:18:07 · 1271 阅读 · 0 评论 -
前端模块化
一、什么是模块?http://www.cnblogs.com/axl234/p/6053280.html定义:具有相同属性和行为的事物的集合在前端中:将一些属性比较类似和行为比较类似的内容放在同一个js文件里面,把这个js文件称为模块目的:为了每个js文件只关注与自身有关的事情,让每个js文件各行其职二、什么是模块化?CommonJS是什么?AMD和CMD又是什么?转载 2017-02-03 15:05:39 · 997 阅读 · 0 评论 -
Gulp使用指南
Grunt靠边,全新的建构工具来了。Gulp的code-over-configuration不只让撰写任务(tasks)更加容易,也更好阅读及维护。http://www.techug.com/gulpGlup使用node.js串流(streams)让建构更快速,不须写出资料到硬盘的暂存档案/目录。如果你想了解更多有关串流–虽然不是必须的–你可以阅读这篇文章。Gulp利用来源档案当作输入,串原创 2016-08-16 09:18:29 · 874 阅读 · 0 评论 -
gulp详细入门教程
gulp详细入门教程http://www.ydcss.com/archives/18简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器, 她转载 2016-08-09 09:37:43 · 1079 阅读 · 0 评论 -
精通gulp构建工具常用插件 原创
本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp。不定期更新。可以到github上面下载DEMOgithub地址:lin-xin/gulp-pluginshttp://www.imooc.com/article/16592匹配符 *、**、!、{}gulp.src('./js/*.js') // *转载 2017-03-04 11:15:18 · 643 阅读 · 0 评论 -
Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩、图片转base64、css和js的压缩以及合并,文件的md5重命名 ……。本人之前也是在项目中没具体使用过,闲来无事,查查资料,自己写了一个用gulp工具的小demo,有很多不足之处,欢迎指点。 第一步:安装node和npm不用说,要用gulp转载 2017-02-27 09:15:01 · 1328 阅读 · 0 评论 -
如何编写一个gulp插件
http://www.cnblogs.com/giggle/p/6344789.html主题 Gulp很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化。再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方gulp插件”gulp-uglify”,来达到压缩JavaScript文件的目的。转载 2017-02-27 09:25:38 · 430 阅读 · 0 评论 -
前端构建系统 Gulp 的使用与常用插件推荐 - 上篇
https://zhuanlan.zhihu.com/p/24975955?refer=web-learning随着 Web 前端发展,前端项目变得越来越复杂,随之而来的是各种方便的工具:打包工具、转码工具、 JS 与 CSS 的合并压缩工具等等。这些工具极大的提高了我们前端的代码质量,但问题也随之而来:这么多工具到底该怎么使用,难道一个个在各个工具中来回切换复制粘贴?或是在 CL转载 2017-02-27 09:29:30 · 319 阅读 · 0 评论 -
前端构建系统 Gulp 的使用与常用插件推荐 - 下篇
小图标转码为内联 base64插件- gulp-base64简介将 CSS 中引用的小图标转码为 base64 编码的 data URI 字符串,减少额外的 http 请求数。使用插件的使用非常简单,什么都不指定直接 pipe 到插件就OK了 // 基础示例 gulp.task('build',转载 2017-02-27 09:30:33 · 344 阅读 · 0 评论 -
精通gulp常用插件
本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp。不定期更新。可以到github上面下载DEMO。 github地址:https://github.com/lin-xin/gulp-plugins匹配符 *、**、!、{}gulp.src('./js/*.js') // * 匹配js文件夹下所有.js格式的文件gu转载 2017-02-18 22:28:02 · 823 阅读 · 0 评论 -
Gulp资料大全:入门、插件、脚手架、包清单
awesome-gulp中文版一份gulp的资源,插件和使用实例清单, 致力于打造更好的前端工程构建流程。http://www.jianshu.com/p/df65ae89b862被老外的awesome 清单刺激到,觉得有必要翻译一份,为国产的程序员们做点事情,本清单将保持实时更新同步。PS:进都进来了,就顺便看看其他的吧:awesome-nodejs-cnawes转载 2017-03-11 19:32:13 · 665 阅读 · 0 评论 -
深入理解gulp自动化
写在前面http://jafeney.com/2016/03/06/2016-03-06-gulp/ gulp使用了有一段时间,公司好几个项目自动化就是用它构建的。不过对这个简单粗暴的工具我常常是又爱又怕。啥意思呢?大牛们写的gulp任务我看得懂,也能依样画葫芦运用到自己的项目,但是如果撇开doc,让我自己写我还真写不好。纸上得来终觉浅啊,考验对一门技术的掌握程度,光看得懂、会套用转载 2017-03-30 10:19:43 · 886 阅读 · 0 评论 -
gulp的初阶使用方法
安装好gulp之后接下来就是使用了,此文主要介绍一些前端开发时常用的一些插件及其用法http://www.imooc.com/article/tag/26/hot/12插件安装安装本地服务器插件:cnpm install gulp-connect --save-dev安装合并文件插件:cnpm install gulp-concat --save-dev安装压缩js文件转载 2017-02-14 14:04:04 · 495 阅读 · 0 评论 -
这可能是较好的gulp实战(后台thinkphp版)
传统开发过程中http://www.imooc.com/article/3135可能你写好了前端页面,给后台去套,你就没啥事了又或者,你可能需要在你的前端页面写上各种后台模板代码,对于我这种前端洁癖,简直不能忍!本文将介绍一种前后端分离的方式,但又能保留着前端能使用后台代码的兼容性既然决定了这种开发模式,我们最先设计的应该是从目录开始本次项目的后台是用Thi转载 2017-02-14 12:38:21 · 882 阅读 · 0 评论 -
前端构建系统 Gulp 的使用与常用插件推荐 - 下篇
https://zhuanlan.zhihu.com/p/24984797小图标转码为内联 base64插件- gulp-base64简介将 CSS 中引用的小图标转码为 base64 编码的 data URI 字符串,减少额外的 http 请求数。使用插件的使用非常简单,什么都不指定直接 pipe 到插件就OK了转载 2017-01-24 21:31:43 · 2094 阅读 · 0 评论 -
gulp-uglify 与gulp.watch()配合使用时遇到的重复压缩问题
今天学习gulp时候,用到gulp-uglify压缩js模块,遇到的一个问题-当用gulp.watch来监听js文件的变动时出现重复压缩的问题目录结构如下:gulpfile.js代码如下: 1 var gulp = require('gulp'); 2 var uglify = require('gulp-uglify'); 3 var rename =转载 2016-08-23 22:30:00 · 1135 阅读 · 0 评论 -
一种基于gulp对seajs的模块做合并压缩的方式
阅读目录1. 合并思路2. 本文小结http://www.cnblogs.com/lyzg/p/5581961.html之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并。现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块合并压缩的问题。然后一开始在解决这个问题的时候,并不是很转载 2016-08-23 22:40:35 · 1870 阅读 · 0 评论 -
Gulp 方法
Gulp有5个基本方法:src、dest、task、run、watchGulp.src() gulp模块的src方法,用于产生数据流。它的参数表示索要处理的文件,一般有以下几种形式:js/app.js:指定确切的文件名js/*.js:某个目录所有后缀为js的文件js/**/*.js:某个目录及其所有子目录中的所有后缀为js的文件!js/app.j转载 2016-08-24 09:56:48 · 604 阅读 · 0 评论 -
Gulp+BroserSync实现浏览器自动刷新
在写前端代码的时候,我们为了看效果,需要一直按F5进行刷新,这样做很繁琐而且非常浪费时间,在网上搜过后发现很多关于自动刷新的办法,这里我介绍的是基于gulp和broserSync实现浏览器的自动刷新,即只要编辑器保存,浏览器就会自动刷新。 那么gulp,broserSync是什么呢?Gulp Gulp是一个前端自动化工具,基于nodejs,和grunt差不多,但是比grun转载 2016-09-18 14:59:50 · 1467 阅读 · 0 评论 -
gulp & webpack整合,鱼与熊掌我都要!
为什么需要前端工程化?http://www.jianshu.com/p/9724c47b406c前端工程化的意义在于让前端这个行业由野蛮时代进化为正规军时代,近年来很多相关的工具和概念诞生。好奇心日报在进行前端工程化的过程中,主要的挑战在于解决如下问题:如何管理多个项目的前端代码?如何同步修改复用代码?如何让开发体验更爽?项目实在太多之前写过一篇博文 如何管理被多个项目引用转载 2016-09-20 09:57:49 · 2233 阅读 · 0 评论 -
gulp+webpack配置
gulp+webpack配置首先介绍一下gulp和webpackgulpgulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javas转载 2016-10-07 11:18:56 · 3183 阅读 · 0 评论 -
想要设计gulp & webpack构建系统?看这儿!
这是前端工程化实践系列的第二篇综合文章,主要内容包括如何设计gulp & webpack构建系统,如何设计gulp子任务,如何实现多项目构建等。所有内容均是基于好奇心日报的项目实践。想要看第一篇综合文章,请移步 前端工程化实践 之 整合gulp/webpack为什么需要前端工程化?前端工程化的意义在于让前端这个行业由野蛮时代进化为正规军时代,近年来很多相关的工具和概念诞生。转载 2017-01-12 09:03:28 · 1154 阅读 · 0 评论 -
gulp前端工程化教程
gulphttp://www.jianshu.com/p/525f1e024915npm install -g gulp-concat 文件打包npm install -g gulp-rename 文件重命名npm install -g gulp-imagemin 图片压缩npm install -g gulp-jslint js代码校验 慎用npm insta转载 2017-02-17 17:23:30 · 1034 阅读 · 0 评论 -
基于gulp编写的一个简单实用的前端开发环境
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里打滚了两年的文艺小码农来说,也有自己的一些体会,今天就来分享一下自己基于Gulp编写的一个比较丑陋的前端开发环境,本人技术有限,有问题和意见请私下聊,勿喷: 首先安装Node.js,至于怎么转载 2017-02-11 19:53:56 · 1332 阅读 · 0 评论 -
gulp+webpack工具整合简介
webpack简介http://blog.csdn.net/xiangzhihong8/article/details/53993980?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.ioWebpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。转载 2017-02-12 08:49:42 · 1238 阅读 · 0 评论 -
前端构建系统 Gulp 的使用与常用插件推荐 - 上篇
https://zhuanlan.zhihu.com/p/24975955随着 Web 前端发展,前端项目变得越来越复杂,随之而来的是各种方便的工具:打包工具、转码工具、 JS 与 CSS 的合并压缩工具等等。这些工具极大的提高了我们前端的代码质量,但问题也随之而来:这么多工具到底该怎么使用,难道一个个在各个工具中来回切换复制粘贴?或是在 CLI 里一条条地敲命里吗?敲完代码还要敲一堆转载 2017-01-24 21:30:48 · 612 阅读 · 0 评论 -
gulp常用插件整理
gulp常用插件整理1.gulp-sass(sass编译)2.gulp-compass(sass编译)3.gulp-autoprefixer(添加CSS3前缀)4.gulp-clean-css(压缩CSS)5.gulp-include(文件包含)6.gulp-concat(文件合并)7.del(文件删除)8.gulp-uglify(压缩js)9.gulp.spr转载 2017-08-27 11:30:44 · 1776 阅读 · 0 评论