使用gulp实时编译sass/sass

背景

在我们新开始的项目中，我们打算使用scss来作为我们的样式书写语言。同时，所有的sass/scss文件经过编译转化成css文件后要存放到跟scss/sass文件相同的目录下。整个前端团队已经有实时的代码编译构建工具，那么我们只需要书写自己的实时scss/sass构建工具，生成对应的css文件后，团队的实时构建工具也会触发编译，做打包构建处理。

第三方包选型

基于gulp的sass/scss编译工具有：基于node-sass的gulp-sass以及基于Ruby的gulp-ruby-sass。但是为了免得再安装Ruby以及一些特定的原因（gulp-ruby-sass与gulp-sass），我选择了使用gulp-sass。

运行方式及运行效果

你需要全局安装gulp：npm install -g gulp,你需要在你项目的根目录下新建gulpfile.js文件。运行方式就是直接在命令行项目根目录下执行：gulp即可。编译成功后会给出编译成功的提示（当然也可以配置关闭该提示），编译失败则会给出编译失败的提示，并且会在命令行控制台打印出详细的错误信息，同时，错误提示的时候会带有音效。在编译之后的css代码，我们使用了cssbeautify对其进行了格式化，同时，你还可以针对自己的需求对其进行语法检查等。

代码

最终的代码在下面。需要注意的是，你要在第19行自己指定需要编译的scss/sass文件所在的目录以及这些目录下不需要编译的子目录，该目录下全部需要编译就不指定数组第二项。

如果所有目录下的scss/sass都需要编译则指定watchFilesPath为：

var watchFilesPath = ‘*.{sass,sass}';

完整的代码：

var path = require('path');

var logSymbols = require('log-symbols');
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var stripCssComments = require('gulp-strip-css-comments');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var cssbeautify = require('cssbeautify');
var mapStream = require('map-stream');
var colors = require('colors');
var minimatch = require('minimatch');

var execSync = require('child_process').execSync;
var projectPath = execSync('git rev-parse --show-toplevel').toString().trim().replace(/\\n/g);

// 指定要编译的目录
var watchFilesPath = ['**/{pc,mobile}/**/*.{scss,sass}', '!**/mobile/hotcss/**'];

// 编译成功通知开关
var successNotify = true;


// 将.scss/.sass文件实时转变为.css文件
gulp.task('styles', function() {
    return gulp.src(watchFilesPath)
        .pipe(plumber({
            errorHandler: reportError
        }))
        .pipe(mapStream(function(file, cb) {
            logPath(file);
            cb(null, file);
        }))
        .pipe(sass())
        // 去掉css注释
        .pipe(stripCssComments())
        // auto prefix
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        // css格式化、美化（因为有f2ehint，故在此不再做语法等的检查与修复）
        .pipe(mapStream(function(file, cb) {
            // 添加css代码的格式化
            var cssContent = file.contents.toString();

            if (/\.(css|sass|scss)/.test(path.extname(file.path))) {
                file.contents = new Buffer(cssbeautify(cssContent, {
                    indent: '    ',
                    openbrace: 'end-of-line',
                    autosemicolon: true
                }));
            }

            cb(null, file);
        }))
        // 将编译后的.css文件存放在.scss文件所在目录下
        .pipe(gulp.dest(function(file) {
            return './';
        }))
        // 编译成功后的提示（频繁提示会有点烦人，可将successNotify设置为：false关闭掉）
        .pipe(notify(function(file) {
            return successNotify && 'scss/sass编译成功！';
        }));
});

gulp.task('watch', function() {
    // Watch .scss files
    gulp.watch(watchFilesPath, ['styles']);
});

// 监听任务时先执行一次编译
gulp.task('default', function() {
    gulp.start('styles', 'watch');
});

/**
    ########### helpers ###########
*/

function logPath(file) {
    console.log(logSymbols.info + ' 正在编译：' + file.path.gray);
}

function reportError(error) {
    var lineNumber = (error.lineNumber) ? 'LINE ' + error.lineNumber + ' -- ' : '';

    notify({
        title: '编译失败 [' + error.plugin + ']',
        message: lineNumber + '具体错误请看控制台！',
        sound: 'Sosumi' // See: https://github.com/mikaelbr/node-notifier#all-notification-options-with-their-defaults
    }).write(error);

    gutil.beep();

    // Pretty error reporting
    var report = '';
    var chalk = gutil.colors.white.bgRed;

    report += chalk('TASK:') + ' [' + error.plugin + ']\n';
    report += chalk('PROB:') + ' ' + error.message + '\n';
    if (error.lineNumber) {
        report += chalk('LINE:') + ' ' + error.lineNumber + '\n';
    }
    if (error.fileName) {
        report += chalk('FILE:') + ' ' + error.fileName + '\n';
    }
    console.error(report);

    // Prevent the 'watch' task from stopping
    this.emit('end');
}

这样你就可以愉快的书写scc/sass代码了。

来源：CSDN

作者：一村又一桩

链接：https://blog.csdn.net/fendouzhe123/article/details/50766550

标签

gulp

scss

require