美文网首页jquery
gulp-ruby-sass与gulp-sass

gulp-ruby-sass与gulp-sass

作者: JasonQiao | 来源:发表于2016-01-22 17:08 被阅读1157次

    gulp-ruby-sass

    1. 它使用Sass gem编译Sass,将结果输出到一个gulp流
    2. 安装命令npm install --save-dev gulp-ruby-sass

    注意:使用gulp-ruby-sass而不是gulp.src来编译Sass文件

    var gulp = require('gulp');
    var sass = require('gulp-ruby-sass');
    
    gulp.task('sass', function () {
      return sass('source/file.scss')
        .on('error', sass.logError)
        .pipe(gulp.dest('result'));
    });
    

    gulp-sass

    1. 依赖于node-sass这个库,node-sass是对libsass的Node绑定
    2. 安装命令 npm install gulp-sass --save-dev

    两者不同

    • gulp-ruby-sass是调用sass,所以需要ruby环境,需要生成临时目录和临时文件
    • gulp-sass是调用node-sass,有node.js环境就够了,编译过程不需要临时目录和文件,直接通过buffer内容转换。
    'use strict';
    
    var gulp = require('gulp');
    var sass = require('gulp-sass');
    
    gulp.task('sass', function () {
      return gulp.src('./sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
    });
    
    gulp.task('sass:watch', function () {
      gulp.watch('./sass/**/*.scss', ['sass']);
    });
    

    <code>'use strict';</code>开启JavaScript严格模式,具体可参考Javascript 严格模式详解

    相关文章

      网友评论

        本文标题:gulp-ruby-sass与gulp-sass

        本文链接:https://www.haomeiwen.com/subject/bhqrkttx.html