認識 Gulp 前端自動化工具

Frontend Automation Tool
, ,

安裝全域 Gulp

把 Gulp 安裝在全域。

1
npm install gulp --global

專案目錄

1
2
3
4
5
6
7
8
9
10
11
|- gulp/
    |- src/
        |- app.js
        |- style.scss
    |- dist/
        |- app.js
        |- style.css
    |- gulpfile.js
    |- package.json
    |- node_modules/
    |- index.html

安裝模組

1
2
3
mkdir project
cd project
npm install

安裝本地 Gulp

把 Gulp 及相關套件安裝在本地。

1
npm install gulp gulp-uglify gulp-sass

新增 gulpfile.js 檔

1
echo "" > gulpfile.js

設定 gulpfile.js 檔

載入 gulp、gulp-uglify、gulp-sass 套件。

1
2
3
var gulp = require('gulp'),
    gulpUglify = require('gulp-uglify'),
    sass = require('gulp-sass');

建立 scripts 任務（壓縮）。

1
2
3
4
5
gulp.task('scripts', function () {
    gulp.src('src/js/app.js')
        .pipe(gulpUglify())
        .pipe(gulp.dest('dist/js/'));
});

建立 styles 任務（編譯）。

1
2
3
4
5
gulp.task('styles', function() {
    gulp.src('src/sass/style.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css/'));
});

建立 watch 任務（監聽）。

1
2
3
4
gulp.task('watch',function() {
    gulp.watch('src/js/app.js', ['scripts']);
    gulp.watch('src/sass/style.scss', ['styles']);
});

建立 default 任務（整合）。

1
2
3
gulp.task('default',
    ['scripts', 'styles']
);

執行 Gulp

進行監聽。

1
gulp watch

進行整合。

1
gulp