> 來源：https://github.com/nimojs/gulp-book
gulp 是基于 node 實現 Web 前端自動化開發的工具，利用它能夠極大的提高開發效率。
在 Web 前端開發工作中有很多“重復工作”，比如壓縮CSS/JS文件。而這些工作都是有規律的。找到這些規律，并編寫 gulp 配置代碼,讓 gulp 自動執行這些“重復工作”。
## 將規律轉換為 gulp 代碼
現有目錄結構如下：
~~~
└── js/
└── a.js
~~~
### [](https://github.com/nimojs/gulp-book#規律)規律
1. 找到 js/目錄下的所有 .js 文件
2. 壓縮這些 js 文件
3. 將壓縮后的代碼另存在 dist/js/ 目錄下
### [](https://github.com/nimojs/gulp-book#編寫-gulp-代碼)編寫 gulp 代碼
~~~
// 壓縮 JavaScript 文件
gulp.task('script', function() {
// 1. 找到
gulp.src('js/*.js')
// 2. 壓縮
.pipe(uglify())
// 3. 另存
.pipe(gulp.dest('dist/js'));
});
~~~
### [](https://github.com/nimojs/gulp-book#代碼執行結果)代碼執行結果
代碼執行后文件結構
~~~
└── 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
