V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
nimo
V2EX  ›  前端开发

《Gulp 入门指南》前言

  •  
  •   nimo · 2015-04-17 22:17:09 +08:00 · 2045 次点击
    这是一个创建于 3519 天前的主题,其中的信息可能已经有所发展或是发生改变。

    gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。

    在 Web 前端开发工作中有很多“重复工作”,比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。

    你可以直接访问 GitHub: gulp-book 查看本书

    目录

    将规律转换为 gulp 代码

    现有目录结构如下:

    └── js/
        └── a.js
    

    规律

    1. 找到 js/目录下的所有 .js 文件
    2. 压缩这些 js 文件
    3. 将压缩后的代码另存在 dist/js/ 目录下

    编写 gulp 代码

    // 压缩 JavaScript 文件
    gulp.task('script', function() {
        // 1. 找到
        gulp.src('js/*.js')
        // 2. 压缩
            .pipe(uglify())
        // 3. 另存
            .pipe(gulp.dest('dist/js'));
    });
    

    代码执行结果

    代码执行后文件结构

    └── js/
    │   └── a.js
    └── dist/
        └── js/
            └── a.js
    

    a.js 压缩前
    ```
    function demo (msg) {
    alert('--------\r\n' + msg + '\r\n--------')
    }

    demo('Hi')

    a.js 压缩后

    function demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi");
    ```

    此时 dist/js 目录下的 .js 文件都是压缩后的版本。

    你还可以监控 js/ 目录下的 js 文件,当某个文件被修改时,自动压缩修改文件。启动 gulp 后就可以让它帮助你自动构建 Web 项目。


    gulp 还可以做很多事,例如:

    1. 压缩CSS
    2. 压缩图片
    3. 编译Sass/LESS
    4. 编译CoffeeScript
    5. markdown 转换为 html

    若作者显示不是Nimo(被转载了),请访问Github原文进行讨论:https://github.com/nimojs/blog/issues/19

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3758 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 04:16 · PVG 12:16 · LAX 20:16 · JFK 23:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.