[Gulp] 快快樂樂學gulp- 起手式

記錄一下簡單的gulp筆記

gulp可以試用於window/linux開發環境，
這裡只介紹我在mac使用過程。

前置作業- 安裝npm

安裝gulp

npm install --global gulp

or

#g就是global的意思，通常都用這個

npm install gulp -g 

gulp設定檔

使用gulp的專案內部需安裝以下二個檔案

package.json: 記錄安裝的npm套件

gulpfile.js: 撰寫你的任務流程

有了此二個設定檔，未來clone此專案就能快速建置開發環境

常用指令介紹

gulp.task

gulp.watch

gulp.src

gulp.desc

初始化你的gulpfile.js  (一個最簡單的範例)

var gulp = require('gulp');
// 我們可以建立一個預設任務，當只輸入 $>gulp 指令時執行的任務
gulp.task('default',['build'],function(){
console.log('run default');
});
gulp.task('build',['build'],function(){
console.log('run build');
});

執行

$>gulp

其他壓縮打包js/css套件

gulp-concat：合併檔案
gulp-minify-css：壓縮 CSS
gulp-uglify：混淆並壓縮 JS
gulp-rename：重新命名檔案

npm install gulp-concat --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-uglify --save-dev
npm install gulp-rename --save-dev

參考

https://www.gitbook.com/book/powerbear0083/gulp-install-record

http://www.oxxostudio.tw/articles/201503/gulp-2-compress-js-css.html

https://987.tw/2014/07/09/gulpru-men-zhi-nan/
https://www.slideshare.net/sfismy/gulpjs
https://www.slideshare.net/appleboy/automating-your-workflow-with-gulp