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

最后附上今天介绍的程式码

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']);

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