Introduction
正如阮一峰所说,前端变化太快了。
前年还在用Grunt, 去年就用了Gulp,而今年都在用Webpack,明年或许都用Brunch了。
我之前一直在用Grunt,后来追Gulp了。后来就实在是不想追了。就老老实实用gulp吧
继续阅读 »
本文翻译自macr.ae
Babel是一个JavaScript转换编译器,它可以将ES6(下一代JavaScript规范,添加了一些新的特性和语法)转换成ES5(可以在浏览器中运行的代码)。这就意味你可以在一些暂时还不支持某些ES6特性的浏览器引擎中,使用ES6的这些特性 - 比如说,class和箭头方法。本文,我将围绕gulp和babel,介绍如何使用它们。
"使用基于Babel的gulp"其实可以有两种理解:一是使用Babel编写ES6语法的gulpfile;二是使用gulp来运行babel,让ES6编写的JavaScript代码转化成浏览器可以理解的JavaScript代码。这两种情况接下来我将一一介绍。
继续阅读 »
gulp的一个案例,主要是对gulpfile.js中的任务进行分割,完成清理、文件复制同时进行筛选压缩、以及html中js和css引用的替换等
more
gulpfile.js
```javascript
'use strict';
var gulp = require('gulp');
var config = {
pkg: require('./package.json'),
publicDir: ['./{public,public/}'],
resourcesDir: ['./{resources/,resources/}'],
apps: ['ads', 'analysis', 'h
继续阅读 »
gulp是一个前端的自动化项目构建工具,与grunt
类似,不过相比之下,grunt的配置以及使用较为繁琐,而gulp则比较简单易学。
一个项目从最初的启动到实现,基本上有如下的构建任务:
继续阅读 »
阅读 gulp API,有一点要注意的就是:
gulp默认以最大并发执行任务,怎样保证某些任务按顺序(即 task A 在 task B 完成之后)执行呢?
继续阅读 »
这是一个不靠谱的学习笔记。想到啥写啥
grunt
自动化工具
安装 grunt
``` bash
install grunt
npm install -g grunt-cli
```
``` bash
安装工具
npm install load-grunt-tasks --save-dev
npm install time-grunt --save-dev
继续阅读 »
这里介绍一些gulp比较常用的插件,包括util工具类、stream相关、inject相关、Angular相关、压缩工具类、server相关、特定语言相关等。
more
util工具类
这个分类下主要介绍一些辅助工具类的插件。
继续阅读 »
例子中的React版本为v0.14.2.
示例目录结构如下:
- libs/
- react/
- node_modules/
- src/
- main.js
- gulpfile.js
- index.html
- bundle.js
- package.json
继续阅读 »
前言
在此之前看了一下gulp相关教程,这里有一个还不错:Gulp for Beginners,
推荐给大家看看。
通过本教程你会了解到:
如何安装webpack;
如何使用webpack;
如何使用loaders;
如何使用开发服务器;
安装webpack
你需要已经安装安装node.js.
bash
$ npm install webpack -g
这使得webpack命令可以使用
设置编译器(Compilation)
以一个空文件夹作为开始.
创建这些文件:
add entry.js
js
document.write("It works");
add index.html
html
继续阅读 »
上个月,我在这篇文章《为什么要停止使用 Grunt 和 Gulp》中建议大家使用 npm 作为替代方案,npm 的 scripts 配置可以实现这些构建工具的所有功能,而且更简洁、更优雅和较少的模块依赖和维护开销。本文第一稿大概有 6000 字,深入讲解了如何将 npm 作为替代方案,但那篇文章主要在表达我的观点,而不是作为一篇教程。然而,读者的反馈却很强烈,许多读者告诉我 npm 并不能完全实现这些构建工具提供的特性,甚至有的读者直接给我一个 Gruntfile,然后反问我:“怎么用 npm 来实现这样的构建方案”?所以我决定进一步更新本文,将其作为一个新手入门教程,主要分享如何使用 npm 来完成一些常见的构建任务。
npm
继续阅读 »