将规律转换为 gulp 代码_gulp 入门指南

现有目录结构如下：

└── js/
    └── a.js

规律

找到 js/目录下的所有 .js 文件
压缩这些 js 文件
将压缩后的代码另存在 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 还可以做很多事，例如：

压缩CSS
压缩图片
编译Sass/LESS
编译CoffeeScript
Markdown 转换为 HTML