gulp-sass

sass 是 css 预编译处理器, 可以像书写 javascript 一样编写 css

Install

npm install gulp gulp-sass --save-dev

因为系统 + 网络原因 gulp-sass 很容易安装失败 可以安装 ruby-sass

gulp-sass 安装失败选择 gulp-ruby-sass

npm install gulp gulp-ruby-sass --save-dev

Basic Usage 基本用法 gulp-sass

在项目跟目录创建 gulpfile.js 粘贴以下代码
var gulp = require('gulp');
var sass = require('gulp-sass');

//添加 sass 任务
gulp.task('sass', function () {
  //gulp-sass 使用 gulp.src 来加载文件模块
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
//监听 scss 文件
gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

Basic Usage 基本用法 gulp-ruby-sass

在项目跟目录创建 gulpfile.js 粘贴以下代码
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');

//添加 sass 任务
gulp.task('sass', function () {
  //gulp-ruby-sass 使用 sass 来加载文件模块
  return sass('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});


//监听 scss 文件
gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});