Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧。Gulp / Grunt 是一种工具,能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说,就是使用Gulp/Grunt,然后配置你需要的插件,就可以把以前需要手工做的事情让它帮你做了。

说到 browserify / webpack ,那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型,browserify / webpack 是另一种类型。

seajs / require : 是一种在线"编译" 模块的方案,相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

browserify / webpack : 是一个预编译模块的方案,相比于上面 ,这个方案更加智能。没用过browserify,这里以webpack为例。首先,它是预编译的,不需要在浏览器中加载解释器。另外,你在本地直接写JS,不管是 AMD / CMD / ES6 风格的模块化,它都能认识,并且编译成浏览器认识的JS。
这样就知道,Gulp是一个工具,而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

js构建工具和预编译的更多相关文章

  1. Rails : css或js文件无法成功预编译或调用jquery类插件时预编译问题

    调用bootstrap css框架时,将bootstrap文件夹放入 vendor/assets/下 bootstrap文件结构如下:    [shenma@localhost demo]$ ls v ...

  2. Erlang:[笔记一,构建工具rebar之编译]

    Rebar概述 Rebar是一款Erlang构建工具,使用它可以方便的编译,测试erlang程序和打包erlang发行版本.Rebar其实是一个独立的erlang脚本,默认情况下,Rebar会按照Er ...

  3. JS运行三部曲(预编译)

    JS运行的三个步骤: 语法分析 预编译 解释执行 语法分析:通俗来说就是通篇检查你的代码有没有语法错误,有语法错误的话,程序是不会执行的 解释执行:也就是程序读一句执行一句 最重点的也就是预编译了,那 ...

  4. js作用域链和预编译

    js引擎运行分为两步,预解析 代码执行 (1)预解析: js引擎会拿js里面所有的var还有 function 提升到当前作用域的最前面 (2)代码执行:按照代码书写的顺序从上往下执行 预解析分为:变 ...

  5. vue-cli3使用 DllPlugin 实现预编译,提升构建速度

    在项目打包上有两个目标:减少打包代码体积和加快打包速度 1. 减少打包体积: (1)对于用的比较少的库,可以去掉(我去掉了jquery以及lodash),用到的地方,参考源码自己写 (2)非用不可的又 ...

  6. js预编译

    先来做三个测试 eg1: var a; a = 1; function a() {}; console.log(a); eg2: var a; function a() {}; console.log ...

  7. Handlebars.js 预编译(转)

    Handlebars.js 官网上对预编译1是这样说的: 你需要安装 Node.js 你需要在全局环境中,通过 Npm 安装 handlebars 包 然后你就可以通过命令预编译你的 handleba ...

  8. JS预编译详解

    我们都知道javascript是解释型语言,执行的特点呢是编译一行,执行一行.按照这个思路有时候我们在运行代码时会有一些令人费解的现象出现.下面我们一起来执行下面三段代码. <script> ...

  9. JavaScript 预编译(变量提升和函数提升的原理)

    本文部分内容转自https://www.cnblogs.com/CBDoctor/p/3745246.html 1.变量提升 console.log(global); // undefined var ...

随机推荐

  1. XAF应用开发教程(五)验证模块

    数据验证是应用程序开发中使用频率最高的功能模块,本节详细介绍一下XAF中如何使用验证模块. XAF 验证模块内置了下面的一些验证规则: 验证规则类型 说明 RuleCombinationOfPrope ...

  2. 使用Select命令创建菜单

    创建文本菜单的一半功夫都花在了创建菜单布局和获取输入的字符上.bash shell提供了一个很容易上手的小工具来自动完成这些工作select命令允许从单个命令行创建菜单,然后在提取输入的答案并自动处理 ...

  3. iOS - UIControl

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIControl : UIView @available(iOS 2.0, *) public class UIC ...

  4. ABAP 没有地方输入\H 进入DEBUG 怎么办?

    把如下代码保存,命名debug.txt  ,把这个文件拖拉到要调试的窗口. [FUNCTION]Command=/HTitle=Barry TestType=SystemCommand

  5. 关于Spring定时任务(定时器)用法

    Spring定时任务的几种实现 Spring定时任务的几种实现 一.分类 从实现的技术上来分类,目前主要有三种技术(或者说有三种产品): 从作业类的继承方式来讲,可以分为两类: 从任务调度的触发时机来 ...

  6. JavaScript的严格模式

    js除了在普通的常规模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).严格模式支持IE9+ Chrome FireFox 等主流浏览器. ...

  7. thinkphp分页效果的制作,按查询条件分页正确做法

    PHP代码: <?php namespace Home\Controller; use Think\Controller; use Home\Clas\Cate; class IndexCont ...

  8. 【Todo】Nginx架构学习

    要进行Web服务,绕不开的就是Nginx.这已经是大型网站的标配.对Nginx进行一定程度的深入学习. http://www.ituring.com.cn/article/4436 http://bl ...

  9. form属性method="get/post

    form属性method="get/post"的两种方式对比 在B/S应用程序中,前台与后台的数据交互,都是通过HTML中Form表单完成的.Form提供了两种数据传输的方式——g ...

  10. maven 启动 报错 Fatal error compiling: 无效的目标发行版

    http://news.tuxi.com.cn/news/119999990123162/31622105.html http://lyking2001.iteye.com/blog/837440 针 ...