New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

《Gulp 入门指南》- 前言 #19

Open
nimojs opened this Issue Apr 17, 2015 · 0 comments

Comments

Projects
None yet
1 participant
@nimojs
Member

nimojs commented Apr 17, 2015

《Gulp 入门指南》- 前言

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原文进行讨论:#19

@nimojs nimojs changed the title from 《Gulp 入门指南》 to 《Gulp 入门指南》- 前言 Apr 17, 2015

OpenRed referenced this issue in OpenRed/Hello-world Apr 6, 2016

@junhey junhey referenced this issue Nov 10, 2016

Open

前端资料 #7

@ruanshr ruanshr referenced this issue Dec 4, 2017

Open

前端知识 #6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment