Sass的简单工作流程

我最近负责优化一个大型Rails项目的Sass方面，最重要的事情之一就是缩短编译时间。 由于采用了Sass体系结构，并且在处理大量文件时，Ruby Sass（在这种情况下是通过Rails资产管道）往往很慢，因此编译样式表可能需要40秒钟的时间。 讨论快速的开发过程。 :)

我的想法是离开资产管道，并接受LibSass的速度。 为了使事情变得容易，我决定使用简单的Gulp工作流程。 这是我第一次使用Gulp，我必须说这是一次非常愉快的经历（就我而言，Grunt并非如此）。

在这篇简短的文章中，让我们快速浏览一下如何设置Gulp'y工作流程以与Sass一起使用。 这是我们将包括的内容：

• 毫不奇怪，使用LibSass进行Sass编译
• 生成源映射以简化调试
• 使用自动前缀对CSS进行前缀
• 使用SassDoc生成Sass文档

编译Sass

首先要做的是安装依赖关系并创建一个Gulpfile.js 。 我们将需要Gulp（不拉屎，Sherlock），但也需要gulp-sass来编译样式表：

$ npm install gulp gulp-sass --save-dev

此行告诉npm安装gulp和gulp-sass软件包作为开发依赖项。 现在，您可以在package.json的devDependencies对象中找到它们。 还有Gulpfile.js ：

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

哇，太短了。 现在，我们需要执行的任务是在样式表文件夹中运行Sass（实际上是gulp-sass ）。

var input = './stylesheets/**/*.scss';
var output = './public/css';

gulp.task('sass', function () {
  return gulp
    // Find all `.scss` files from the `stylesheets/` folder
    .src(input)
    // Run Sass on those files
    .pipe(sass())
    // Write the resulting CSS in the output folder
    .pipe(gulp.dest(output));
});

而已！ 由于非常简单的Gulp任务，我们现在可以使用LibSass编译样式表。 那个怎么样？ 我们可以将选项传递给gulp-sass以在扩展模式下编译样式表并在控制台中打印错误：

var sassOptions = {
  errLogToConsole: true,
  outputStyle: 'expanded'
};

gulp.task('sass', function () {
  return gulp
    .src(input)
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(gulp.dest(output));
});

添加源图

到目前为止，一切都很好。 现在，如何生成源映射？ 如果您不知道什么是源映射，则基本上是一种将压缩的生产源与扩展的开发源进行映射的方法，以使调试实时代码更加容易。 它们完全不限于CSS，sourcemap也可以在JavaScript中使用。

我们在SitePoint上有一篇关于Sourcemaps的不错的文章。 如果您对源映射的理解有些短，请在继续阅读之前先对其进行阅读。

好的，因此要将sourcemaps生成添加到我们的任务中，我们需要安装gulp-sourcemaps ：

$ npm install gulp-sourcemaps --save-dev

现在让我们优化我们的任务：

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

// ... variables

gulp.task('sass', function () {
  return gulp
    .src(input)
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(output));
});

默认情况下， gulp-sourcemaps将源映射内联地写入已编译的CSS文件中。 根据项目设置，我们可能希望将它们写入单独的文件中，在这种情况下，我们可以在sourcemaps.write()函数中指定相对于gulp.dest()目标的路径，例如：

gulp.task('sass', function () {
  return gulp
    .src(input)
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(sourcemaps.write('./stylesheets/maps'))
    .pipe(gulp.dest(output));
});

携带Autoprefixer参加聚会

我不会详细说明为什么使用Autoprefixer优于手动编写供应商（或使用基本上相同的mixin），但是大致来说Autoprefixer是后期处理步骤，这意味着它实际上会更新已编译的样式表以添加基于最新数据库和给定配置的相关前缀。 换句话说，您告诉Autoprefixer您要支持哪些浏览器，并且它仅在样式表中添加相关的前缀。 零努力，完美的支持（请提醒我为这个流行语申请专利）。

要将Autoprefixer包含在Gulp'y工作流程中，我们只需要在Sass完成其工作后将其管道传输即可。 然后，Autoprefixer会更新样式表以添加前缀。

首先，让我们安装它（您现在已经掌握了要点）：

$ npm install gulp-autoprefixer --save-dev

然后，将其添加到我们的任务中：

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

// ... variables

gulp.task('sass', function () {
  return gulp
    .src(input)
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer())
    .pipe(gulp.dest(output));
});

现在，我们使用Autoprefixer的默认配置运行

• 具有超过1％市场份额的浏览器，
• 所有浏览器的最后2个版本，
• Firefox ESR，
• Opera 12.1

我们可以这样使用我们自己的配置：

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

// ... variables
var autoprefixerOptions = {
  browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
};

gulp.task('sass', function () {
  return gulp
    .src(input)
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(output));
});

发布文档！

添加到我们的工作流程中的最后一个（但并非最不重要）工具是使用SassDoc生成Sass文档。 SassDoc对Sass意味着JSDoc对JavaScript：一种文档工具。 它解析您的样式表，以查找注释块，这些注释块记录了变量，mixin，函数和占位符。

如果您的项目使用SassDoc（应该这样做），则可以在Gulp工作流程中添加自动文档生成。

SassDoc的优点在于它可以直接在Gulp中进行管道传输，因为其API与Gulp兼容。 因此，您实际上没有gulp-sassdoc插件。

npm install sassdoc --save-dev

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var sassdoc = require('sassdoc');

// ... variables

gulp.task('sass', function () {
  return gulp
    .src(input)
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(output))
    .pipe(sassdoc())
    // Release the pressure back and trigger flowing mode (drain)
    // See: http://sassdoc.com/gulp/#drain-event
    .resume();
});

请注意，根据项目的大小和记录的项目数，SassDoc可能需要花费几秒钟的时间运行（据我所知，它实际上很少超过3秒钟），因此您可能希望为这个。

gulp.task('sassdoc', function () {
  return gulp
    .src(input)
    .pipe(sassdoc())
    .resume();
});

同样，我们使用默认配置，但如果需要，可以使用自己的配置。

var sassdocOptions = {
  dest: './public/sassdoc'
};

gulp.task('sassdoc', function () {
  return gulp
    .src(input)
    .pipe(sassdoc(sassdocOptions))
    .resume();
});

我在看着你

在离开之前，我们仍然可以做些事情：创建watch任务。 该任务的重点是监视样式表中的更改以再次重新编译它们。 在项目的Sass端进行工作时非常方便，因此您不必在每次保存文件时都手动运行sass任务。

gulp.task('watch', function() {
  return gulp
    // Watch the input folder for change,
    // and run `sass` task when something happens
    .watch(input, ['sass'])
    // When there is a change,
    // log a message in the console
    .on('change', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

这是我建议在sass任务中不包括SassDoc的另一个原因：您可能不想每次触摸样式表时都重新生成文档。 这可能是您要在构建或推送中执行的操作，可能需要使用预提交的挂钩。

添加最后的印象

最后要考虑的重要一件事：在默认任务中运行sass 。

gulp.task('default', ['sass', 'watch' /*, possible other tasks... */]);

作为task(..)函数的第二个参数传递的数组是依赖项任务的列表。 基本上，它告诉Gulp运行那些任务，然后再运行指定为第三个参数的任务（如果有的话）。

另外，我们可能会创建一个prod任务，该任务可以在部署到生产之前运行（可能带有git hook）。 该任务应：

• 在压缩模式下编译Sass
• 带自动前缀的前缀CSS
• 重新生成SassDoc文档
• 避免任何源图

gulp.task('prod', ['sassdoc'], function () {
  return gulp
    .src(input)
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(output));
});

最后的想法

就是这样！ 在短短的几分钟和几行JavaScript中，我们设法创建了一个功能强大的Gulp小工作流程。 您可以在此处找到完整文件 。 您会添加什么？

From: https://www.sitepoint.com/simple-gulpy-workflow-sass/