一个简单的Gulp＆＃x27; y的工作流程

钥匙要点

• 大量的工作流可以改善大型铁轨项目中的SASS汇编时间，远离资产管道并拥抱Libsass的速度。
• gulp工作流程包括使用libsass的SASS编译，生成sourcemaps，以更容易调试，将CSS与AutopReFixer一起前缀，并使用SASSDOC生成Sass Document。
>可以通过添加监视样式显示器更改以重新编译的手表任务来进一步优化工作流程，从而消除了每个文件保存后手动运行SASS任务的需求。
• >可以创建一个用于部署到生产的“产品”任务，该任务以压缩模式编译了SASS，带有AutoPrefixer的前缀CSS，再生SASSDOC文档，并避免使用任何sourcemaps。
• >我最近负责优化相当大的铁路项目的萨斯一侧，最重要的事情之一就是改善汇编时间。由于存在SASS架构以及Ruby Sass（在这种情况下通过Rails Asset Pipeline）在处理大量文件时往往会很慢，因此编译样式表的最多可能需要40秒钟。谈论快速开发过程。 ：）

我的想法是远离资产管道，拥抱libsass的速度。为了使事情变得更容易，我决定使用简单的Gulp工作流程。这是我第一次使用大口，我必须说这是一个非常愉快的经历（就我而言，这不是咕unt的情况）。

在这篇简短的文章中，让我们快速浏览如何建立大量的工作流程以与Sass合作。这是我们将包括的内容：

毫不奇怪，用libsass

汇编

生成sourcemaps，以便更轻松的调试

• >用自动旋转器前缀CSS
用sassdoc
• 生成sass文档
• 编译SASS
观看Atoz：Sass 通过信函学习萨斯
• 观看此课程 观看此课程
>要做的第一件事是安装依赖项并创建Gulpfile.js。我们将需要吞噬（不屎，夏洛克），但也需要散发出我们的样式表：

>

>该行告诉NPM将Gulp和Gulp-Sass软件包同时安装作为开发依赖项。现在，您可以在软件包的devDecondies.json中找到它们。和gulpfile.js：

哇，那很短。我们现在需要的是

$ <span>npm install gulp gulp-sass --save-dev</span>

任务

在我们的stylesheets文件夹上运行sass（实际上是gulp-sass）。

$ <span>npm install gulp gulp-sass --save-dev</span>

就是这样！现在，由于一项非常小的Gulp任务，我们可以使用Libsass来编译样式表。那呢？我们可以将选项传递给Gulp-sass，以在扩展模式下编译样式表，并在控制台中打印错误：>

添加Sourcemaps

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

到目前为止，一切都很好。现在，生成Sourcemaps呢？如果您不知道什么是Sourcemaps，它基本上是一种用扩展的开发来源绘制压缩生产源的方式，以使调试实时代码更加容易。它们根本不限于CSS，也可以在JavaScript中使用Sourcemaps。

>我们在SitePoint上有一篇关于Sourcemaps的精彩文章。如果您对Sourcemaps的理解有些不足，请随时对其进行阅读。

>

好吧，因此，要在我们的任务中添加SourceMaps生成，我们需要安装Gulp-Sourcemaps：>

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

默认情况下，Gulp-Sourcemaps在编译的CSS文件中写入Sourcemaps。根据项目设置的不同，我们可能需要在单独的文件中写入它们，在这种情况下，我们可以在sourcemaps.write.write（）函数中指定相对于gulp.dest（）目标的路径。

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

>将AutopReFixer带到派对

>我不会详细介绍为什么使用AutoPrefixer比手工编写供应商更好（或使用Mixin（基本上是同一件事）更好），但是粗略的AutopReFixer是一个后处理步骤基于最新数据库和给定配置的样式表添加相关前缀。换句话说，您告诉您要支持的autoprefixer，它仅在样式表中添加相关的前缀。零努力，完美的支持（请提醒我为此插图申请专利）。

<span>var sassOptions = {
</span>  <span>errLogToConsole: true,
</span>  <span>outputStyle: 'expanded'
</span><span>};
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

>

要在我们的Gulp’y工作流中包括自动旋转器，我们只需要在SASS完成它的工作后才需要 pipe

>。然后自动改装器更新样式表以添加前缀。>

$ <span>npm install gulp-sourcemaps --save-dev</span>

首先，让我们安装它（您现在就可以得出要点）：

>

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

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

浏览器的市场份额超过1％，

所有浏览器的最后2个版本，

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var sourcemaps = require('gulp-sourcemaps');
</span>
<span>// ... variables
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write())
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

> firefox ESR，

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

Opera 12.1

我们可以使用自己的配置这样：
• 释放文档！
• >最后但并非最不重要的是用sassdoc添加我们的工作流程文档生成的工具。 SASSDOC是要解决JSDOC的JavaScript：文档工具。它可以解析您的样式表寻找评论块，记录变量，混音，功能和占位符。
如果您的项目使用SASSDOC（应该！），则可以在Gulp Workflow中添加自动文档生成。
• SASSDOC的酷炫事物是可以将其直接输送到Gulp中，因为它的API是兼容的。因此，您实际上没有Gulp-sassdoc插件。

  $ <span>npm install gulp gulp-sass --save-dev</span>

  请注意，根据您的项目的大小和已记录的项目数量，SassDoc最多可以运行几秒钟（据我所知，很少超过3个）为此单独任务。

  <span>var gulp = require('gulp');
  </span><span>var sass = require('gulp-sass');</span>

  再次，我们使用默认配置，但是如果愿意，我们可以使用自己的配置。>

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

  我正在看着你
  >在离开之前，我们仍然可以做些什么：创建手表任务。该任务的目的是注意样式表的更改以再次重新编译它们。在项目的Sass侧工作时非常方便，因此您不必每次保存文件时都可以手工运行SASS任务。

  <span>var sassOptions = {
  </span>  <span>errLogToConsole: true,
  </span>  <span>outputStyle: 'expanded'
  </span><span>};
  </span>
  gulp<span>.task('sass', function () {
  </span>  <span>return gulp
  </span>    <span>.src(input)
  </span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
  </span>    <span>.pipe(gulp.dest(output));
  </span><span>});</span>

  >这是我建议不要在SASS任务中加入SASSDOC的另一个原因：您可能不想每次触摸样式表时都会再生文档。这可能是您在构建或推动上要做的事情，也许是使用预先承诺的挂钩。

  添加最终触摸

  $ <span>npm install gulp-sourcemaps --save-dev</span>

  最后但重要的是要考虑的事情：在默认任务中运行sass。
  >作为任务（..）函数的第二个参数传递的数组是依赖关系任务的列表。基本上，它告诉Gulp在运行指定为第三个参数（如果有）之前运行这些任务。

  >。

  >此外，我们可能可以创建一个可以在部署到生产之前直接运行的产品任务（也许是用git钩）。此任务应：
  在压缩模式下编译SASS

  <span>var gulp = require('gulp');
  </span><span>var sass = require('gulp-sass');
  </span><span>var sourcemaps = require('gulp-sourcemaps');
  </span>
  <span>// ... variables
  </span>
  gulp<span>.task('sass', function () {
  </span>  <span>return gulp
  </span>    <span>.src(input)
  </span>    <span>.pipe(sourcemaps.init())
  </span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
  </span>    <span>.pipe(sourcemaps.write())
  </span>    <span>.pipe(gulp.dest(output));
  </span><span>});</span>

  >

  >带有autoprefixer的前缀CSS

  再生sassdoc文档

  避免任何sourcemaps
  最终想法
  就是伙计们！在短短几分钟和几行JavaScript中，我们设法创建了一个强大的小小的Gulp工作流程。您可以在此处找到完整的文件。你会添加什么？
  • >
  经常询问有关GULP和SASS Workflow的问题（常见问题解答）
  >如何为我的项目安装Gulp和Sass？

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

  以安装项目的Gulp和Sass，您需要在计算机上安装Node.js和NPM。一旦拥有这些功能，就可以通过在终端中运行命令NPM安装命令NPM安装-Global Gulp-CLI来全局安装GULP。之后，导航到您的项目目录并运行NPM INIT创建一个package.json文件。然后，通过运行NPM安装-Save-Dev Gulp-Sass。

  >如何使用Gulp？

  来编译SASS文件，以使用Gulp编译SASS文件，需要创建一个Gulp任务。在您的Gulpfile.js中，您可以创建一个名为“ SASS”的任务，该任务将您的SASS文件编译为CSS。这是一个如何执行此操作的简单示例：
  
  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'））;
  }） ;
  

  此任务将在您的SASS目录中获取所有.scss文件，使用Gulp-sass将其编译为CSS，然后输出所得的CSS文件您的CSS目录。

  如何观看SASS文件中的更改并自动编译它们？
  >
  
  GULP提供了一种名为Watch的方法，您可以使用该方法在更改文件时可以自动运行任务。这是您可以修改“ SASS”任务以查看更改的方法：
  gulp.task（'sass'，function（）{ gulp.watch（'./ sass/*）*/*。 ['sass']）;
  }）;
  

  现在，每当您将.scss文件保存在SASS目录中时，“ SASS”任务都会自动运行并将SASS文件编译到CSS中。>如何处理SASS文件中的错误？

  在编译SASS文件时，您可能会遇到语法错误。您可以使用Gulp-Sass提供的ON方法处理这些错误。这是您可以将“ SASS”任务修改为记录错误的方法：
  
  gulp.task（'sass'，function（）{ return gulp.src（'./ sass/**/*。 scss'）
  .pipe（sass（）。on（'error'，sass.logerror））
  >如何使用Gulp缩小我的CSS文件？
  
  缩小CSS文件，您可以使用GULP插件称为Gulp-Clean-CSS。首先，通过运行NPM安装-Save-dev Gulp-Clean-CSS将其安装在项目中。然后，您可以创建一个任务，该任务将缩小您的CSS文件：

  var cleancss = require（'gulp-clean-css'）; gulp.task（'kinify-css'，'nimify-css'，'， （）=> { return gulp.src（'styles/*。css'）

  .pipe（cleancss（{compatibility：compatibility：compatibility： 'ie8'}）））

  .pipe（gulp.dest（'dist''））;
  }）;
  
  >
  
  此任务将在您的样式目录中使用所有.css文件Gulp-clean-css，并在您的DIST目录中输出所得的CSS文件。
  

以上是一个简单的Gulp＆＃x27; y的工作流程的详细内容。更多信息请关注PHP中文网其他相关文章！