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. Codeforces Round #379 (Div. 2) E. Anton and Tree 树的直径

    E. Anton and Tree time limit per test 3 seconds memory limit per test 256 megabytes input standard i ...

  2. hdu 5167 Fibonacci 打表

    Fibonacci Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Proble ...

  3. JS 实现点击展开菜单

    1: 获取事件源的两种方式 2: overflow 控制展现 <%@ page language="java" import="java.util.*" ...

  4. DOM解析XML练习

    首先以XML文件存储数据,格式如下(作为数据库) exam.xml <?xml version="1.0" encoding="UTF-8" standa ...

  5. Android Studio常见问题 -- AndroidManifest.xml 覆盖问题

    问题如下 D:\source-code\AndroidStudio\MyApplication\app\src\main\AndroidManifest.xmlError:(14, 9) Attrib ...

  6. Windows_CMD_临时环境变量

    1. 以 path 为例: 1.1.查看: set path 1.2.添加: set path=%path%;"要添加的路径" 附录:下面贴上一些常用的环境变量及作用 %ALLUS ...

  7. Java编程思想学习笔记_5(IO流)

    一.用DataInputStream读取字符 可以使用available方法查看还有多少可供存取的字符.示例如下: public class Test1 { public static void ma ...

  8. 自我总结(五)---(学习j2ee)

    自我完善的过程就是在不断的自我总结不断的改进. 我们这半个月来都是学习j2ee.这个知识是很重要的,一般我们出去工作都是会用到的.我们的星期六,星期天也是不上课的.所以说我相当于上了十天的j2ee了. ...

  9. Java / JVM CPU 利用率高 - 诊断方法 1 - Thread Dump 结合 OS 诊断

    IBM AIX Java 1. topas 命令定位 CPU 使用高的进程,比如下面 PID 614852 Name            PID  CPU% java         614852  ...

  10. gcj_2016_Round1_B

    题目 一个NxN的矩阵,矩阵中每个方格中都有一个数值,且每一行的数值严格单调递增,每一列的数值严格单调递增.分别取出N行和N列,形成2N个长度为N的数组,现在有一个数组丢失,已知剩下的2N-1个长度为 ...