gulp 前端構建工具入門

gulp 前端構建工具入門

標籤（空格分隔）： gulp

---

1. 安裝gulp

npm i -g gulp

2. 建立gulp項目

2.1 Hello world

使用npm init初始化項目文件夾。
使用npm install --save-dev gulp本地安裝gulp依賴。
根目錄下新建gulpfile.js。

按照編程的尿性，先試一下hello world：

var gulp = require('gulp');

gulp.task('hello', function() {
    console.log('Hello world');
});

而後在命令行執行：gulp hello：

2.2 編譯sass

首先項目根目錄新建src文件夾，其下新建scss文件夾和css文件夾。
安裝gulp-sass：

npm install --save-dev gulp-sass

在scss文件夾下新建sass文件：

$width: percentage(5 / 7);

.test {
  width: ceil($width);  
}

編輯根目錄下的gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
    return gulp.src('src/scss/styles.scss')
    .pipe(sass())
    .pipe(gulp.dest('src/css'));
});

在根目錄下命令行執行gulp sass：

能夠看到css目錄下自動出現了編譯後的css文件。

2.3 使用通配符

相似於正則，能夠匹配多個文件。

• *.scss 匹配當前目錄任意scss文件
• **/*.scss 匹配當前目錄及子目錄下的全部scss文件
• !exclude.scss 排除匹配項
• *.+(scss|sass) 匹配多項

上面例子的gulpfile能夠改成：

gulp.task('sass', function() {
    return gulp.src('src/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('src/css'))
});

2.4 監聽文件變化

gulp.series：按照順序執行
gulp.paralle：能夠並行計算

watch方法能夠監聽文件變化從而自動執行指定任務：

gulp.task('sass-watch', function() {
    gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

命令行執行gulp sass-watch：

2.5 自動刷新瀏覽器

Browser Sync插件能夠搭建本地服務器而且實時刷新瀏覽器。

npm install --save-dev browser-sync

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');

var server = browserSync.create();

gulp.task('sass', function() {
    return gulp.src('src/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('src/css'))
    // 刷新瀏覽器
    .pipe(server.reload({
        stream: true
    }));
});

// 建立本地服務
gulp.task('browserSync', function(done) {
    server.init({
        server: {
            baseDir: 'src'
        }
    });
    done();
});

// 監聽全部sass文件
gulp.task('sass-watch', function() {
    gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

// 最終任務
gulp.task('watcher', gulp.series('browserSync', 'sass', 'sass-watch'));

---

後續會學習一下優化以及gulp4的一些新寫法。

To be continued... Last updated by Jehorn, 7:17 PM, Wednesday, February 27, 2019 (GMT+8)