Gulp and Webpack

[shiaoyi]

Gulp

• 把一堆工作流程自動化的library
• 例如把 sass compile 成 css、用 babel 把 javascript compile 成 es5 的語法...要做很多事，尤其每完成一個專案就必須重複一樣的動作，所以我們可以寫一個腳本，下一個指令就可以一次把全部事情做完。除此之外，也可以壓縮css、js...，壓縮完就會看到一堆看起來像亂碼的東西，讓檔案變小。
• 範例 存在gulpfile.js

var gulp = require('gulp'); // 引入gulp library
var less = require('gulp-less'); // 引入其他plugin
var minifyCSS = require('gulp-csso');

gulp.task('css', function(){
  return gulp.src('client/templates/*.less') // 要轉換的source放在哪
    .pipe(less()) // less compile 成 css
    .pipe(minifyCSS()) // 壓縮css
    .pipe(gulp.dest('build/css')) // 要把轉換後的東西放去哪
});
gulp.task('default', ['css']); // 預設執行的task是css

• 安裝 Gulp

npm install gulp-cli -g
npm install gulp -D

若需要require其他的plugin要再安裝，例如需要sass plugin要在terminal打

npm install node-sass gulp-sass --save-dev

Webpack

前端寫在 node.js 上時，可以使用裡面的import功能，但在瀏覽器上寫的時候則不行，所以 Webpack 讓瀏覽器也可以用 node.js 那種模組化開發
甚至可以把圖片、css都引進來

• 安裝

 npm install webpack webpack-cli --save-dev

• 之後要創建一個 webpack.config.js

const path = require('path');
module.exports = {
    entry: './index.js', //entry：是我們的進入點，我指定路徑是 index.js
    output: { //output：打包輸出後的檔案，檔名在index後面加了個bundle，來確認它是打包過後的檔案。
        filename: 'index.bundle.js',
        path: path.resolve(__dirname, './'),
    }
};

• 如果東西是裝在local端，要用某個library時要以 ./node_modules/.bin/xxx 來開頭