http://www.cnblogs.com/gongcheng9990/archive/2014/11/25/4120434.html http://modernweb.com/2014/08/04/choose-grunt-gulp-npm/…

前言 近期的项目全部由Grunt + LESS 转向改用Gulp + SASS 进行前端开发,也就奔着Gulp那比较好用的自定义函数而来的. 一.package.json文件配置如下: { "name": "your app's name", "version": "0.1.0", "description": "your app's description", "main&q…

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

一.gulp是什么 gulp就是用来机械化的完成重复性质(如less->css:js.css压缩:js混淆)的工作:gulp的机制就是将重复工作抽象成一个个的任务. 二.gulp使用 a.首先确保电脑上已经正确安装了node环境: b.其次再全局安装gulp,命令行语句:npm install -g gulp: c.在项目根目录下添加一个gulpfile.js文件,这个是gulp的主文件,这个文件名是固定的:d.在gulpfile中抽象我们需要做的任务. 小案例: 'use strict'; /…

嗨,小伙伴们,大家周五好,又到了一周中最最最期待的周五啦啦~~~ 这几天一直在研究gulp的使用方法,今天抽时间来整理一下基本步骤. gulp 的使用流程: 安装nodejs ->安装git(方便调出命令窗口,可选) -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1.gulp是基于node开发的工具,所以在使用gulp前,必须先安装node.js,安装步骤很简单,从网上下载一个node安装包,一步一步进行安装…

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

在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/6159809.html 在之前建立的项目中写入,在根目录新建js文件夹,并在文件夹中新建两个js文件,代码如下: index.js: var index={}; index={ test:function(argument){ console.log('test'); } } index.test()…

1.gulp环境的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 2.建立文件夹 mkdir item 3.初始化项目: npm init 这时候查看一下item文件件多了一个package.json.这是gulp的配置文件. 里面的内容就是我们刚才填写的信息. 4.继续命令行,安装gulp包,并且在配置文件中 --save-dev表示在package.json添加配置 npm install gulp --save-dev…

Nicolas Bevacqua进行了一个比较JavaScript构建(编绎)系统的任务.他对三巨头: Grunt, Gulp and NPM进行了比较,并讨论了每种的优缺点. By Nicolas Bevacqua 决定采用何种技术总是很难的.一旦遇到问题,你不想推翻你之前的选择.但是你必须选一个,然后让它按照着你的思路做.实施一套构建(编绎)系也是一样的,你应该把它看作一个非常重要的选择,让我们以Grunt为例. Grunt有一个完善的社区,即使是在Windows上 它不仅仅应用在Node社…

gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程:文件流--文件流--文件流......因为grunt操作会创建临时文件,会有频繁的IO操作,而gulp使用的是流操作,一直是在内存中处理,直到输出结果. 因此gulp在效率上确实远胜grunt,并且学习成本不高,在这非常感谢刘剑辛的分享! 一. 快速生成package.json npm init //生成package.json 如图: 二.nmp安装参数中--save.--save-dev是什么 pack…

1.优点 1.1 易于使用 通过代码优于配置的策略,gulp让简单的任务简单,复杂的任务可管理 1.2 构建快速 利用node.js流的威力,你可以快速构建项目并减少频繁的IO操作 1.3 插件高质 gulp严格的插件指南确保插件如你期望的那样简洁高质的工作 1.4 易于学习 通过最少的API,掌握gulp毫不费力,构建工作尽在掌握:如同一系列流管道 2.gulp使用说明 2.1 安装 在工程根目录下进入cmd 初始化npm,在项目根目录下新建package.json文件 npm init 全局…

/* gulp配置 */ /* gulp配置 */ var gulp = require('gulp'), concat = require('gulp-concat'), rename = require('gulp-rename'), uglify = require('gulp-uglify'), rev = require('gulp-rev-append'), //自动添加版本号 browserSync = require('browser-sync').create(); //热更新…

Gulp中文网:https://www.gulpjs.com.cn/ Gulp英文网:https://gulpjs.com/ Gulp:工作流程自动化+强化 (一)安装初始化 (二)基础API及插件 ①gulp.src(globs[, options]);//输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件.它可以被 piped 到别的插件中 gulp.src('client/js/**/*.js', { base: 'client' }…

gulp的使用介绍及技巧 转载: https://www.cnblogs.com/2050/p/4198792.html 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次.把目录切换到你的项目文件夹中,然后在命令行中执行: npm install gulp 如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上--s…

一.gulp使用-博客推荐: http://www.sheyilin.com/2016/02/gulp_introduce/ 二.gulp的作用 gulp是一个前端构建工具,它是一个工具框架,可以通过开发插件来扩展它的功能. gulp的工作流程是在一个配置文件中指明对某些文件进行压缩.合并.编译等功能,之后工具就会自动完成这些任务. 使用构建工具主要是为了提高开发效率,将重复性的工作利用构建工具来自动完成. 三.创建配置gulp的文件过程 1.全局安装gulp npm install gulp…

一.gulp简介     1.gulp是什么? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用它,不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 javascript.coffee.sass.less.html/image.css 等文件的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文…

Gulp是一款自动化构建工具 用npm安装 npm install -g gulp npm install --save-dev gulp 分别在全局和项目目录里安装. 然后在项目目录里创建gulpfile.js文件. 一个最简单的gulp任务: var gulp = require('gulp'); gulp.task('default',function(){ console.log('hello world'); }); 在命令行里执行: gulp 在gulp中,使用的是Nodejs中的s…

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

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

gulp的安装和使用方法 1先是有node为前提的, 2安装淘宝镜像 2.1因为很多npm包都是国外的,所以安装起来很慢,所以我们可以利用淘宝的镜像服务器来进行安装后续的包,速度和成功率会高很多.  所以首先打开cmd,输入指令: npm --registry=https://registry.npm.taobao.org install -g cnpm 3是安装gulp 首先,新建一个用来项目开发的空文件夹,然后再命令行工具里cd到文件夹中(有git的童鞋在文件夹里直接右键 git bash…

gulp的优势 易于使用:通过代码优于配置的策略,Gulp让简单的任务简单,复杂的任务可管理. 构建快速:利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作. 插件高质:Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 易于学习:通过最少的API,掌握Gulp毫不费力,构建工作尽在掌握:如同一系列流管道. 安装及开始 1.全局安装 gulp:npm install --g gulp 2.npm init生成package.json文件 2.作为项目的开发依赖…

随着现在前端技术的不断发展,和各个公司对前端项目开发更新速度的要求,前端自动化越来越受到大家的重视,之前传统的前端开发方式已经越来越不能满足开发的需求了,于是各种自动化工具随之产生了.而gulp就是其中一款非常强大的工具. 1.安装node.js:由于gulp是基于node.js的.所以首先需要安装node.js,node下载地址:http://nodejs.cn/download/ 安装比较简单.安装完成之后在cmd里输入:node -v 查看安装的node版本. npm -v  查看安装的n…

流程 1. 输入命令(可以使用git bash或者命令控制台cmd) npm install -g gulp 安装全局gulp命令 2. 创建一个项目文件夹, 当前项目文件夹下输入命令npm init 配置package.json文件, 这一部分看情况自己决定是否填, 不想填也可以, 直接按回车 当前项目文件夹下输入命令npm install gulp --save-dev 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次 开始使用gulp 其实, gulp的使用比webpa…

1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次.把目录切换到你的项目文件夹中,然后在命令行中执行: npm install gulp 如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上--save-dev: npm install --save-dev gulp 这样就完成了gulp的安装.至于为什么在全局安装…

引言 相信从事web前端开发的朋友都知道,现在流行的Vue.AngularJS等框架中,它们都有独立的脚手架来创建项目,比如Vue有vue-cli,Angular有angula-cli.脚手架可以一键生成你的项目模版,包括依赖库,免去你手动安装各种插件,寻找各种cdn并一个个引入的麻烦.而且在开发项目中加入了热启动,当编辑保存之后,页面会相应的自动更新,免去了手动刷新的麻烦.那为什么有这么好的脚手架了,直接用它们不就好了吗?当然我不是闲着没事做,上面提到的脚手架创建的项目是比较适用于单页面项目的…

Study Notes 本博主会持续更新各种前端的技术,如果各位道友喜欢,可以关注.收藏.点赞下本博主的文章. Gulp 用自动化构建工具增强你的工作流程! gulp 将开发流程中让人痛苦或耗时的任务自动化,从而减少你所浪费的时间.创造更大价值. 基本使用 安装 gulp npm i gulp -D 在项目根目录下创建gulpfile.js文件 function defaultTask(cb) { // 在此处写默认任务的代码 cb(); } function fooTask(cb) { //…

一.gulp简介 1.gulp是什么? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用它,不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 javascript.coffee.sass.less.html/image.css 等文件的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动…

前言 随着前端诸如webpack,rollup,vite的发展,gulp感觉似乎好像被取代了.其实并没有,只不过它从台前退居到了幕后.我们仍然可以在很多项目中看到它的身影,比如elementplus.vant等.现在gulp更多的是做流程化的控制. 比如我们要把一个大象放进冰箱里就需要 打开冰箱门->把大象放进冰箱->关上冰箱门,这就是一个简单的流程,使用gulp就可以规定这些流程,将这个流程自动化,并自动执行这个流程. 所以我们可以使用它在项目开发过程中自动执行常见任务.比如打包一个组件库,…

写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失:如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Webpack的大门. //一个常见的Webpack配置文件 var webpack = requir…

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm inst…