前端自動化構建工具gulp(二)

前端自動化構建工具gulp(二)

建立一個真實的例子：

建立一個項目，結構如圖

gulp的使用方法一般是這樣的

gulp.task('task-name', function () {
  return gulp.src('source-files') // source-files是任務的入口文件路徑
    .pipe(aGulpPlugin()) // 調用插件
    .pipe(gulp.dest('destination')) //destination執行任務輸出文件路徑 
})

咱們將使用gulp-sass插件來編譯sass:

1.安裝插件

 cnpm install --save-dev gulp-sass

2.在gulpfile.js中引入插件並使用

// gulpfile.js

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

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

3.編寫sass文件

// style.scss
.testing {
    width: percentage(5/7);
}

4.執行命令 gulp sass

咱們將看到在app/css文件夾下生成了style.css文件 

.testing {
  width: 71.42857%; }

styles.css是gulp智動爲咱們生成的。percentage 是Sass的方法。

使用Sass就這麼簡單。