在项目中使用gulp
目录
- 为什么要使用gulp？
- 使用gulp之后，我们的技术选型是怎样的？
- 使用gulp之后，我们的项目可以变成怎么样？
- 使用gulp之后，我们的项目怎么放？
- 现在有什么gulp命令？
- 有啥管用不花钱的东西？
- 还有什么我要注意的？
-
我们离模块化的开发还有多远？
我们的目的是制造一个通过命令行，解决所有重复性工作的工作环境。
能够自行完成的操作，就不要让我动手指！
能用键盘解决的问题，就不要让我用鼠标！
能够重复使用的东西，就不要让我重新写！
拒绝重复性工作，只专注于项目中。
没有标准，我们制造标准。
越省心，越健康！
1. 为什么要使用gulp？
作为一个前端重构工程师，在开发的时候，我们需要同时管理：
- HTML
- CSS
- JavaScript
- 还有一大堆的图片、字体、swf等等。
前端发展到现在了，你还让我写静态页面，让我来回复制HTML结构，实在是太太糟糕。
于是，各种编译工具层出不穷，sass、less、ejs、coffeeScript等，极大的解放了我们的生产力，让我们越来越省心。 但是，
- 编译sass要开个命令行打compass
- 压缩个png需要打开tinypng.com来做
- 编不下去了…
很多时候，我们在做很多重复性的工作，但这实际上是对生产无益，同时，这些操作亦是可以略去的。
怎么略去？对的，gulp可以帮到你。
我们的目的是制造一个通过命令行，解决所有重复性工作的工作环境。
在一般情况下，只要我们输入gulp这一个命令，我们就能够得到——ejs、sass、js、png…等文件的编译、压缩，同时！它还能监听上述文件的改动，每当有改动，都能够重新编译一遍，保证我们用到的都是最新的。
打一个比方：
平时我们在使用compass的时候，一般会在命令行打compass watch来进行任务。
假如我现在要加入ejs，加入png，加入很多东西呢？compass watch能解决吗？
gulp能够批量化的处理很多自动化的工作，一句gulp == compass watch * n!
现在，四个字母:gulp便可解决一切。
2、使用gulp之后，我们的技术选型是怎样的？
在使用gulp之后，我们当然要将前端三剑侠——html, css, javascript都弄的自动化，模块化啦！
因此，技术选型，必须够潮够模块！
- HTML –> EJS
- CSS –> SASS
- JavaScript –> SeaJS
- png还是那个png，但是是被压缩的
- font还是那个font，但是是被抽离的(构建中)
因此，我们整个编写项目的环境，就能够实现一块一块的管理了。
未来的展望：
- 需求分类 –> 直接引用现成的初始化模板
- 模块化开发 –> 模块信手拈来，拿起就用
- 拒绝盲目复制，胡乱翻箱倒柜
3、使用gulp之后，我们的项目可以变成怎么样？
在我手上的一个需求——仙语移动官网上，我做了第一次的大胆尝试，希望能够给大家带来一点思考。
1、HTML –> EJS
因为一个完整的HTML需要至少两个东西：1、结构；2、数据内容。
因此，我大胆的将EJS分为两块：
- 结构，也就是模块，以下划线“_”开头。存放在app/ejs/文件夹中，通过app/*.ejs来调用。
- 数据内容，针对每个成品页面，创建一个json文件，例如index.ejs使用index.json内的数据。数据存放在app/data/文件夹中。
2、CSS –> SASS
大家都SASS都懂，也都在用，的确非常方便。
针对于当前EJS的目录结构，觉得SASS目录应如下：
- 每一个EJS模块都能配有一个SASS文件，存放在sass同级目录下，以下划线开头。
- 例如： _activity.ejs 对应 _activity.sass
- 每一个EJS成品页面都能配有一个SASS文件，存放在sass同级目录下，不以下划线开头。
- 例如： index.ejs 对应 index.sass
- 配合BEM编写风格使用，效果更佳！
3、JavaScript –> SeaJS
SeaJS的使用，由勇哥为我们讲解一下。
4、使用gulp之后，我们的项目怎么放？
项目目录结构（本结构的所有权归勇哥所有）
[lib] //公共库（通常无需要做合并处理）
[jquery]
jquery_1.7.2.js
jquery_1.7.2_min.js
[...]
[app] //用于存放所有项目
[p01] //项目一
[src] //项目源文件
[sass]
_data.scss
public.scss
index.scss
list.scss
[js]
_module1.js
_module2.js
main.js
[ejs]
header.ejs
footer.ejs
[images]
[_button]
a.png
a.psd
b.png
b.psd
other.png
[...]
[data]
index.json
list.json
[media]
video.mp4
audio.mp3
[swf]
button.swf
bg.swf
[font]
fscy.ttf
04_08b.ttf
index.ejs
list.ejs
article.ejs
[dist] //编译出来的项目
[style]
public.css
index.css
list.css
[js] //如果未做构建则跟源目录一样
_module1.js
_module2.js
main.js
[images]
_button_fj9ncm85.png
other.png
[media]
video.mp4
audio.mp3
[swf]
button.swf
bg.swf
[font] //字蛛处理过的
fscy.ttf
fscy.svg
fscy.woff
fscy.eot
04_08b.ttf
04_08b.svg
04_08b.woff
04_08b.eot
index.html
list.html
article.html
[...]
[util_sass] //公共sass模块
_p_reset.scss
_m_reset.scss
_pm_arrow.scss
_p_pop.scss
[util_ejs] //公共ejs模块
_p_gw_topBar.ejs
_p_gw_footer.ejs
_p_zt_Footer.ejs
_p_hd_lottery.ejs
[util_js] //公共js模块
_p_pop.js
_p_tip.js
[util_tpl] //公共项目模版
[p_zt01] //跟项目目录结构一样
[m_zt01] //跟项目目录结构一样
5、现在有什么gulp命令？
- gulp ejs –> 编译ejs为html
- gulp sass –> 编译sass为css
- gulp js –> 编译js，检测语法错误
- gulp move –> 迁移不需做处理的项目，从src到dist
- gulp png –> 压缩png
- gulp jpg –> 压缩jpg
- gulp gif –> 压缩gif
- gulp svg –> 压缩svg
- gulp img –> 执行png、jpg、gif、svg任务。
- gulp watch –> 创建监听器，监听当前目录下的改动
- gulp build –> 执行ejs、sass、js、img、move任务。
- gulp default –> 执行build、watch任务。
- gulp cpfont -f [your font name] –> 从util_font/文件夹中将需要用到的字体复制过来
- gulp cptpl -s [tpl name] -d [your project name] –> 从util_tpl/文件夹中将指定的初始化模板复制到app中，并改为你指定的名字
- 注意！
- 这个任务的执行目录为app/，而不是项目内。
- gulp font [-s htmlFileName -s htmlFileName -s htmlFileName … ] –> 根据html内容压缩字体。默认是遍历所有HTML文件，亦可指定某一个或多个HTMl文件。
- 注意！
- 如果存在一个字体文件无法编译通过，则会报错。
- 如果存在一些文字，字体文件无法适配，则会报错。
- 一般报错的形式如下：
events.js:141 throw er; // Unhandled 'error' event ^ Error: Repeat unicode, glyph index: 1 at Object.error.raise (F:\try\node_modules\fonteditor-core\ttf\error.js:28:13) at F:\try\node_modules\fonteditor-core\ttf\ttfwriter.js:93:27 at Array.forEach (native) at F:\try\node_modules\fonteditor-core\ttf\ttfwriter.js:91:26 at Array.forEach (native) at TTFWriter.resolve (F:\try\node_modules\fonteditor-core\ttf\ttfwriter.js:87:14) at TTFWriter.write (F:\try\node_modules\fonteditor-core\ttf\ttfwriter.js:217:13) at minifyTtf (F:\try\node_modules\fontmin\plugins\glyph.js:97:29) at Through2._transform (F:\try\node_modules\fontmin\plugins\glyph.js:153:27) at Through2.Transform._read (F:\try\node_modules\fontmin\node_modules\readable-stream\lib\_stream_transform.js:184:10) - gulp del –> 清除dist/目录下的所有东西。
- gulp pack –> 运行了del和build任务，意思是将最终的结果重新打包，然后我们就可以将dist/目录下的东西提交交付了。
6、有啥管用不花钱的东西？
有！ 在APP/文件夹的同级目录下，有:
- util_ejs/ 存放可以共用的ejs模板
- util_font/ 存放特殊的font字体文件
- util_sass/ 存放可以共用的sass模板
- util_tpl/ 存放标志性的初始化模板，针对不同的需求量身定制
现在就动手，快点开始去填充内容吧！
7、还有什么我要注意的？
要注意的，可能是目录结构的存放。
谨记：
- src/目录是我们日常开发所操作的目录。我们的任何代码添加、修改都应该在src/目录下进行，然后让gulp将我们的代码编译并打包到dist。
- 不要操作dist/目录下的任何东西！因为这样没任何意义。