本文内容概要： 1 什么是Gulp 2 Gulp VS Grunt 3 Gulp的安装与使用 4 命令行的简单介绍 1 什么是Gulp Gulp是一个前端自动化构建工具，在项目开发过程中，开发工程师可以使用它自动化地完成...-> 3.1.6 运行Gulp定义好的任务 3.1.1 安装Node.js -> 说明：因为Gulp是基于Node.js构建的，所以需要安装Node.js。...window系统，使用Windows Installer (.msi)即可。双击安装包，一直下一步即可，Node.js会自动把环境变量配好~ 如果你使用的是Windows8的话，有可能报错。...解决方法是用管理员权限运行此文件，鼠标右击window图标，点击命令提示符（管理员）。之后把你的安装包所在路径输入进去就行了，这样打开安装包就不会报错了。 ? ?...比如：定位到F盘下的gulp文件夹。 ? dir命令用来列出当前目录下的文件列表。 比如：列出F盘gulp文件夹下的文件列表。 ? cls清空命令提示符窗口内容。
在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。...命令行在OSX是终端（Terminal），在windows是命令提示符（Command Prompt）； 2.2、注：之后操作都是在windows系统下； 2.3、简单介绍gulp在使用过程中常用命令...PS：未能出现版本号，请尝试注销电脑重试； npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器，那它有什么用呢？...； 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误； 注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm...7、本地安装gulp插件 7.1、安装：定位目录命令后提示符执行cnpm install –save-dev； 7.2、本示例以gulp-less为例（编译less文件），命令提示符执行cnpm install
在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。...命令行在OSX是终端（Terminal），在windows是命令提示符（Command Prompt）； 2.2、注：之后操作都是在windows系统下； 2.3、简单介绍gulp在使用过程中常用命令，...PS：未能出现版本号，请尝试注销电脑重试； npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器，那它有什么用呢？...； 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误； 注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm...7、本地安装gulp插件 7.1、安装：定位目录命令后提示符执行cnpm install –save-dev； 7.2、本示例以gulp-less为例（编译less文件），命令提示符执行cnpm install
---- 安装 Gulp.js Gulp.js 是基于 Node 的构建工具，类似 Grunt, 要使用它，你的机器上需要装有 Node.js。...在命令行模式下执行： npm install -g gulp 这样就可以将 gulp 以全局方式安装到你的电脑上，以后可以随时通过命令行的 gulp 命令来调用。...后来从 isux 转岗到 TGideas, 工作流程发生了巨大的变化，同时我在 Windows / Linux / Mac 不同平台下工作的时间也越来越多，于是转向了 Grunt....之后又听说过、尝试过一些前端构建工具，但都没有让我放弃 Grunt. 第一次看到 Gulp 的介绍时，就被它的配置语法所吸引。因为对于任何一个接触过 Node.js 的人来说，这语法是在是太舒服了。...而且它的插件库也不断在增长，尤其是现在有这么多开发者对它有兴趣，相信它会得到快速的发展。 如果你还没有尝试过，不妨尝试一下。
Grunt 1.1 Grunt安装 1.2 Grunt配置文件 1.3 Grunt任务的运行 2. Gulp 2.1 Gulp安装 2.2 Gulp配置 2.3 Gulp运行 3....下载Windows Installer(.msi)程序进行安装，默认安装npm(node package manager)，及注册node的安装目录到操作系统的环境变量，这样在命令行界面任何路径下都可以访问...接下来要说明的开发测试工具，很多都基于node和npm。 npm的默认仓库源访问比较慢，可通过修改npm配置注册源地址或npm安装模块时带--registry选项指定源仓库地址。...该配置文件是一个node.js的模块，Grunt运行需要该配置文件。...grunt #各模块及目标依次执行 grunt cssmin #执行cssmin模块下所有目标任务 grunt cssmin:minify #执行cssmin模块下的minify目标任务 2) 运行方式
它不是JS文件，也不是JS框架，而是Server side JavaScript runtime，当服务端的一个JS文件运行时，会被NODE拦截，在NODE中运行JS代码。...JS由ES（ECMAScript），DOM，BOM 组成，目前运行在浏览器内核中，NODE中只能运行ECMAScript，无法使用DOM，BOM。 NODE就是一个JS运行环境。...3、windows下用nvm 安装node 如果你已经单独安装了node，建议先卸载。...在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。...文件 gulp-minify-html 最小化图像：gulp-imagemin 5、运行gulp 说明：命令提示符执行gulp 任务名称； 编译less：命令提示符执行gulp testLess； 当执行
下载Windows Installer(.msi)程序进行安装，默认安装npm(node package manager)，及注册node的安装目录到操作系统的环境变量，这样在命令行界面任何路径下都可以访问...接下来要说明的开发测试工具，很多都基于node和npm。 npm的默认仓库源访问比较慢，可通过修改npm配置注册源地址或npm安装模块时带--registry选项指定源仓库地址。 2....该配置文件是一个node.js的模块，Grunt运行需要该配置文件。...PC上Chrome的Inspect界面出现手机Chrome上已打开的页面。如图二。 4) 在其中一个打开的页面下点击inspect就可以进到chrome的开发者工具调试页面了。如图三。 2....2) 有时在配置代理及手机Wifi代理都正确的情况下，有可能需要清一下Fiddler的缓存（Tools->Clear WinINet Cache和Cookie）才可以正常连接。
在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。...安装nodejs 没有的node的话，从这下载 Node.js，若已经有了可跳过这一步。 最好能保证你的node与npm/cnpm处于最新的状态，以免安装某些最新版本的gulp插件时因此报错。...如果你考虑一下多少时间被浪费在运行构建命令（ a build command）或者刷新浏览器上，你将意识到可以节省大量的时间。...Gulp的代替品 gulp有很多的代替品，其中大多数在几年前就已经存在了，最著名的就是Grunt。Gulp和Grunt之间的比赛永远不会有一个明确的赢家，因为他们都有利弊，所以我会避免深入研究。...如果我们省略了任务名称，则会运行名为“default”的任务。 代码演练 以上需要7行JavaScript代码完成。
1.集成开发环境 个人或团队开发AngularJS项目时，有很多JavaScript编辑器可以选择。...当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。 目前在前端开发过程中常用的构建工具有2种，一个是Grunt，另外一个Gulp。...2.1 Grunt ? 简介:Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。...如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上吧。先看看入门文档吧。...https://yarnpkg.com/ 使用和参考:[http://imweb.io/topic/581f6c0bf2e7e042172d618a] 在Google趋势里面也可以看到以上四种包管理工具使用情况
”grunt“不是内部或外部命令，也不是可运行的程序 或批处理文件。...4、问题排查 查看node的安装根目录 npm root -g 在运行grunt -version还是不行 网上找了很多，给出正确解决方案的没几个，所以自己摸索，最后确定了加环境变量的解决方案。...这类问题都可以解决，如： ”gulp“不是内部或外部命令，也不是可运行的程序 或批处理文件。 5、解决方法步骤 我的系统系windows7,自己参照解决哦。...下面才行 3、从新启动dos ，进入项目查看grunt是否可用 如果上述方法还不行，去F:\关山资料\ES\elasticsearch-head-master下的node_modules查看是否有grunt...安装windows安装elasticsearch-head时 不需要输入grunt server 而是在elasticsearch-head文件夹内输入 npm start，会自动调用grunt server
最近读了 Why I Left Gulp and Grunt for npm Scripts。读完后，觉的这文章写的相当不错，就决定尝试下。 下面先简单介绍下 npm Scripts。...当然 Windows 并不支持该命令。要做到跨平台。可以用第三包rimraf。...如用用 Gulp 来做同样的事，就只能找 Gulp 的插件来做了（Grunt 也一样）。 进入正题 我做了一个前端脚手架项目:front-end-scaffold(还处于 Alpha 状态)。...在 package.json 的配置如下 "scripts": { // 开发时所有要做的 "start": "node_modules/.bin/npm-run-all --parallel...参考链接 Why I Left Gulp and Grunt for npm Scripts 我为何放弃Gulp与Grunt，转投npm scripts[译] react-slingshot npm-scripts
上期文章： gulp源码解析（一）—— Stream详解 gulp 之所以在性能上好于 grunt，主要是因为有了 Stream 助力来做数据的传输和处理。...为了分析源码，我们打开 gulp 仓库下的入口文件 index.js，可以很直观地发现，几个主要的 API 都是直接引用 vinyl-fs 模块上暴露的接口的： ?...而 glob-stream 又是借助了 node-glob 来匹配文件列表的： ? 打印结果： ?...在 Linux/Unix 系统上，symlink 可以通过 ln 指令来创建；在 windows 系统上可以通过 mklink 指令来创建。...此处也有一点很值得了解的地方 —— 当输出文件为 Buffer 类型时（大部分情况下），使用的是异步的 fs.writeFile 接口，而在 grunt 中使用的是阻塞的 fs.writeFileSync
上期文章： gulp源码解析（一）： Stream详解 gulp 之所以在性能上好于 grunt，主要是因为有了 Stream 助力来做数据的传输和处理。...为了分析源码，我们打开 gulp 仓库下的入口文件 index.js，可以很直观地发现，几个主要的 API 都是直接引用 vinyl-fs 模块上暴露的接口的： 因此了解 vinyl-fs 模块的作用...又是借助了 node-glob 来匹配文件列表的： 打印结果： glob-stream 的全部源码注解可以到 https://github.com/VaJoy/stream/blob/master...在 Linux/Unix 系统上，symlink 可以通过 ln 指令来创建；在 windows 系统上可以通过 mklink 指令来创建。...当输出文件为 Buffer 类型时（大部分情况下），使用的是异步的 fs.writeFile 接口，而在 grunt 中使用的是阻塞的 fs.writeFileSync 接口（参考 grunt/file.js
在 Web 开发历程上，我们构建了很多小型的技术解决方案，比如用 HTML 去描述页面结构，CSS 去描述页面样式，JavaScript 去描述页面逻辑，或者你也可以用一些比如 Jade 去取代 HTML...NPM, the Node.js package manager, is full of those. 这里有很多为什么我们需要尝试那些新技术的理由。...Grunt 和 Gulp 是在是前端的世界中最流行的解决方案，他们两个都有很多非常有用的插件。NPM（Node.js 的包管理器）则包含了他们两个。...); }); // 默认任务（就是你在命令行输入 `gulp` 时运行） gulp.task('default', ['watch', 'scripts']); Given the configuration...You can wrap existing Node.js modules as Gulp plugins and so on.
Grunt不使用数据流，而是使用文件，对文件执行单个任务然后保存到新的文件中，每个任务都会重复执行所有进程，文件系统频繁的处理任务会导致Grunt的运行速度比Gulp慢。...; }); 执行gulp greet的结果就是在控制台上打印出“Hello world”. 一个任务有时也可以是一系列任务。...有些拥有“gulpfriendly”标签的插件，他们不能算插件，但是能在Gulp上正常运行。...需要注意的是，当直接在npm里搜索时，你无法知道某一插件是否在黑名单上（你需要滚动到插件页面底部才能看到）。...你可以在电脑和iPhone上打开不同的浏览器然后进行操作。所有设备上的链接将会随之变化，当你向下滚动页面时，所有设备上页面都会向下滚动（通常还很流畅！）。当你在表单中输入文本时，每个窗口都会有输入。
把cocos h5当成c++、lua在使用，编写的代码不能在浏览器上运行。 现象：因为他们大多是在模拟器上开发，对web开发技术了解的不多，不能同时兼顾原生和浏览器。...cocos H5在资源管理上与cocos c++/lua最大的区别是“异步加载”，这也是疑惑的问题之一。 3. 编写的代码不能在原生上运行。...我认识为模块化是编写Cocos H5开发的第一步，我在项目编码中一律采用nodejs代码风格，利用Browserify或Webpack可以将代码完美地运行在浏览器和原生上。...Grunt & Gulp Grunt是Javascript世界的构建工具，对于需要反复重复的任务实现自动化，自动化工具可以减轻你的劳动，简化你的工作。...我在cocos H5项目开发中用到的Grunt插件主要是： grunt-shell grunt-sync 编写命令工具的npm模块有： shelljs node-xlsx yargs plist rd
在项目中添加一个名为Typescript的文件夹 在添加任何文件之前，确认Visual Studio 2015打开了“保存时编译”的项目(在“工具->选项->文本编辑器->Typescript=>项目...file，保留默认的文件名，点击确定按钮 在package.json文件中，在devDependencies属性下，输入grunt，使用只能提示选择grunt并回车，添加冒号，并使用智能提示选择版本号...保存文件 这些包将会被自动下载，你可以在node-modules目录下看到下载的内容，前提是你打开了”显示所有文件“ ?...方法来让任务在Visual Studio中运行 grunt.loadNpmTasks("grunt-contrib-clean"); 保存这个文件，文件内容如下所示 module.exports.../*.js", ['all']); }); 使用同样的方式，在Task Runner Explorer中绑定Visual Studio事件，就可以让watch任务在项目打开时自动执行了。
让我们开始在你的电脑上安装Gulp吧。 安装Gulp 在你安装Gulp之前，需要安装Node.js（Node)环境。 如果你没有安装，你可以在这个网页来获取安装包。...npm install命令，使用Node Package Manager（npm）来安装Gulp。 -g标志代表这个安装时全局安装到你的电脑上，这就运行你在电脑的任何地方都能使用gulp。...; }); 我们可以在命令行中通过gulp hello来运行这个任务 $gulp hello 命令行将会返回一个日志，打印出Hello Zell! ?...我们可以在styules.scss中增加一个Sass函数 .testing{ width:percentage(5/7; } 如果你在命令行中运行gulp sass，你应该就能看到app/css...watchers }) 我们也希望确定sass在watch之前运行，所以CSS将在我们运行Gulp命令时，是最新的。
「然而」，Node.js 的诞生和发展令前端工具生态不断壮大，目前我们所熟知的 Grunt /Gulp/webpack 等工具均是「由 Node.js 为底层驱动平台的」。...，在Node.js出现之前，前端针对资源的处理，只局限在「压缩」和「文件合并」上，更悲惨的是，有时候还需要低三下四的去借用别的语言的运行时环境（runtime）。...Grunt vs Gulp 「读写速度」 1. Gulp 在处理任务的过程中基于 NodeJS 的数据流，「本质上是读写内存」 2....Grunt 则是基于临时文件, 读写速度上 Gulp 要快于 Grunt 社区使用规模 在 npmjs.com 的周下载量方面，Gulp 大约是 Grunt 的两倍 「配置文件的易用性」 相比描述不同插件配置信息的...在「绝对路径的情况下」，会按照 node_modules 规则「递归查找」，在解析失败的情况下，会抛出异常 「模块加载」: 1. require() 的执行过程是「同步的」 2.
更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。 无论您是前端还是后端工程师，使用它将提高您30%的工作效率。...安装 Node.jsBrowserSync是基于Node.js的, 是一个Node模块， 如果您想要快速使用它，也许您需要先安装一下Node.js安装适用于Mac OS，Windows和Linux。...打开一个终端窗口，运行以下命令： npm install -g browser-sync 3.当然您也可以结合gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令: npm install...browser-sync start --server --files "**/*.css, **/*.html" 7.如果您还没有使用gulp或grunt，那么可以通过以上方式创建Browsersync...Image.png 7.以上若是原生调试不了： 换一种： npm -g install weinre ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
