在项目中使用gulp

在项目中使用gulp

---

http://pampang.github.io/2016/02/02/%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8gulp/

目录

1. 为什么要使用gulp？
2. 使用gulp之后，我们的技术选型是怎样的？
3. 使用gulp之后，我们的项目可以变成怎么样？
4. 使用gulp之后，我们的项目怎么放？
5. 现在有什么gulp命令？
6. 有啥管用不花钱的东西？
7. 还有什么我要注意的？

1. 我们离模块化的开发还有多远？

我们的目的是制造一个通过命令行，解决所有重复性工作的工作环境。

能够自行完成的操作，就不要让我动手指！

能用键盘解决的问题，就不要让我用鼠标！

能够重复使用的东西，就不要让我重新写！

拒绝重复性工作，只专注于项目中。

没有标准，我们制造标准。

越省心，越健康！

1. 为什么要使用gulp？

作为一个前端重构工程师，在开发的时候，我们需要同时管理：

1. HTML
2. CSS
3. JavaScript
4. 还有一大堆的图片、字体、swf等等。

前端发展到现在了，你还让我写静态页面，让我来回复制HTML结构，实在是太太糟糕。

于是，各种编译工具层出不穷，sass、less、ejs、coffeeScript等，极大的解放了我们的生产力，让我们越来越省心。
但是，

1. 编译sass要开个命令行打compass
2. 压缩个png需要打开tinypng.com来做
3. 编不下去了…

很多时候，我们在做很多重复性的工作，但这实际上是对生产无益，同时，这些操作亦是可以略去的。

怎么略去？对的，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都弄的自动化，模块化啦！

因此，技术选型，必须够潮够模块！

1. HTML –> EJS
2. CSS –> SASS
3. JavaScript –> SeaJS
4. png还是那个png，但是是被压缩的
5. font还是那个font，但是是被抽离的(构建中)

因此，我们整个编写项目的环境，就能够实现一块一块的管理了。

未来的展望：

1. 需求分类 –> 直接引用现成的初始化模板
2. 模块化开发 –> 模块信手拈来，拿起就用
3. 拒绝盲目复制，胡乱翻箱倒柜

3、使用gulp之后，我们的项目可以变成怎么样？

在我手上的一个需求——仙语移动官网上，我做了第一次的大胆尝试，希望能够给大家带来一点思考。

1、HTML –> EJS

因为一个完整的HTML需要至少两个东西：1、结构；2、数据内容。

因此，我大胆的将EJS分为两块：

1. 结构，也就是模块，以下划线“_”开头。存放在app/ejs/文件夹中，通过app/*.ejs来调用。
2. 数据内容，针对每个成品页面，创建一个json文件，例如index.ejs使用index.json内的数据。数据存放在app/data/文件夹中。

2、CSS –> SASS

大家都SASS都懂，也都在用，的确非常方便。

针对于当前EJS的目录结构，觉得SASS目录应如下：

1. 每一个EJS模块都能配有一个SASS文件，存放在sass同级目录下，以下划线开头。
   
   1. 例如： _activity.ejs 对应 _activity.sass
2. 每一个EJS成品页面都能配有一个SASS文件，存放在sass同级目录下，不以下划线开头。
   
   1. 例如： index.ejs 对应 index.sass
3. 配合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命令？

1. gulp ejs –> 编译ejs为html
2. gulp sass –> 编译sass为css
3. gulp js –> 编译js，检测语法错误
4. gulp move –> 迁移不需做处理的项目，从src到dist
5. gulp png –> 压缩png
6. gulp jpg –> 压缩jpg
7. gulp gif –> 压缩gif
8. gulp svg –> 压缩svg
9. gulp img –> 执行png、jpg、gif、svg任务。
10. gulp watch –> 创建监听器，监听当前目录下的改动
11. gulp build –> 执行ejs、sass、js、img、move任务。
12. gulp default –> 执行build、watch任务。
13. gulp cpfont -f [your font name] –> 从util_font/文件夹中将需要用到的字体复制过来
14. gulp cptpl -s [tpl name] -d [your project name] –> 从util_tpl/文件夹中将指定的初始化模板复制到app中，并改为你指定的名字
    
    1. 注意！
    2. 这个任务的执行目录为app/，而不是项目内。

15. gulp font [-s htmlFileName -s htmlFileName -s htmlFileName … ] –> 根据html内容压缩字体。默认是遍历所有HTML文件，亦可指定某一个或多个HTMl文件。

    1. 注意！
    2. 如果存在一个字体文件无法编译通过，则会报错。
    3. 如果存在一些文字，字体文件无法适配，则会报错。
    4. 一般报错的形式如下：

    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)

16. gulp del –> 清除dist/目录下的所有东西。
17. gulp pack –> 运行了del和build任务，意思是将最终的结果重新打包，然后我们就可以将dist/目录下的东西提交交付了。

6、有啥管用不花钱的东西？

有！
在APP/文件夹的同级目录下，有:

1. util_ejs/ 存放可以共用的ejs模板
2. util_font/ 存放特殊的font字体文件
3. util_sass/ 存放可以共用的sass模板
4. util_tpl/ 存放标志性的初始化模板，针对不同的需求量身定制

现在就动手，快点开始去填充内容吧！

7、还有什么我要注意的？

要注意的，可能是目录结构的存放。

谨记：

1. src/目录是我们日常开发所操作的目录。我们的任何代码添加、修改都应该在src/目录下进行，然后让gulp将我们的代码编译并打包到dist。
2. 不要操作dist/目录下的任何东西！因为这样没任何意义。