Gulp 基础介绍 gulp-sass DAY80

今天要来介绍 gulp-sass 如何安装与使用

gulp-sass 介绍
 https://www.npmjs.com/package/gulp-sass

安装:

终端机输入 npm install gulp-sass --save
node-sass 为 gulp-sass 的相依套件，安装 gulp-sass 的同时会连同 node-sass 一起安装
代表本地端只须执行安装 gulp-sass 的指令即可。
载入 gulp-sass 套件

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

这里输入完後在终端机输入 gulp sass
会发现我们的 scss档会编译成 css档并放在 css资料夹内
4. watch 监控
监控 "./source/scss/**/*.scss " 此资料夹

若内容有变更则执行後面 ['sass'] 指令

gulp.task('watch', function () {
    gulp.watch('./source/scss/**/*.scss', ['sass']);
});

接着在终端机输入 gulp watch
会发现
假如我们有变更 scss档的内容
ex:

$primary-color : red;
body{
    background-color: $primary-color;
}

改成 blue
会即时的监控并输出css档

scss:

$primary-color : blue;
body{
    background-color: $primary-color;
}

css:

body {
  background-color: blue; }

那现在我们已经有 3个任务了(jade sass watch)
我们可以把任务合并

gulp.task('default',['watch','jade','sass']);

然後在终端机输入 gulp
就可以一次执行这三个任务啦~~

不过 gulp 停止的方式有两个状况
一个是我们在终端机输入 ctrl +c
一个是编译错误会自动停止

但假如我们不想要它停止
可以再安装另一个套件
gulp-plumber

npm install gulp-plumber --save
加入 var plumber = require('gulp-plumber');
在资料来源下补上 .pipe(plumber())

最後附上今天介绍的程序码

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

gulp.task('jade', function() {
    gulp.src('./source/**/*.jade')
    .pipe(plumber())
    .pipe(jade({
        pretty: true
    }))
    .pipe(gulp.dest('./public/'))
});
gulp.task('sass', function () {
    return gulp.src('./source/scss/**/*.scss')
    .pipe(plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/css'));
});
gulp.task('watch', function () {
    gulp.watch('./source/scss/**/*.scss', ['sass']);
});
gulp.task('default',['jade','sass','watch']);

那今天的介绍就到这里
若有任何问题或内容有误
都可以跟我说唷