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

>

然後我們將其添加到我們的任務(wù)中：

>現(xiàn)在，我們使用autoprefixer的默認(rèn)配置運(yùn)行，

<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>

我們可以使用自己的配置這樣：
• 釋放文檔！
• >最後但並非最不重要的是用sassdoc添加我們的工作流程文檔生成的工具。 SASSDOC是要解決JSDOC的JavaScript：文檔工具。它可以解析您的樣式表尋找評(píng)論塊，記錄變量，混音，功能和占位符。
如果您的項(xiàng)目使用SASSDOC（應(yīng)該?。瑒t可以在Gulp Workflow中添加自動(dòng)文檔生成。
• SASSDOC的酷炫事物是可以將其直接輸送到Gulp中，因?yàn)樗腁PI是兼容的。因此，您實(shí)際上沒(méi)有Gulp-sassdoc插件。

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

  請(qǐng)注意，根據(jù)您的項(xiàng)目的大小和已記錄的項(xiàng)目數(shù)量，SassDoc最多可以運(yùn)行幾秒鐘（據(jù)我所知，很少超過(guò)3個(gè)）為此單獨(dú)任務(wù)。

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

  再次，我們使用默認(rèn)配置，但是如果願(yuàn)意，我們可以使用自己的配置。 >

  <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>

  我正在看著你
  >在離開之前，我們?nèi)匀豢梢宰鲂┦颤N：創(chuàng)建手錶任務(wù)。該任務(wù)的目的是注意樣式表的更改以再次重新編譯它們。在項(xiàng)目的Sass側(cè)工作時(shí)非常方便，因此您不必每次保存文件時(shí)都可以手工運(yùn)行SASS任務(wù)。

  <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任務(wù)中加入SASSDOC的另一個(gè)原因：您可能不想每次觸摸樣式表時(shí)都會(huì)再生文檔。這可能是您在構(gòu)建或推動(dòng)上要做的事情，也許是使用預(yù)先承諾的掛鉤。

  添加最終觸摸

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

  最後但重要的是要考慮的事情：在默認(rèn)任務(wù)中運(yùn)行sass。
  >作為任務(wù)（..）函數(shù)的第二個(gè)參數(shù)傳遞的數(shù)組是依賴關(guān)係任務(wù)的列表?；旧?，它告訴Gulp在運(yùn)行指定為第三個(gè)參數(shù)（如果有）之前運(yùn)行這些任務(wù)。

  >。

  >此外，我們可能可以創(chuàng)建一個(gè)可以在部署到生產(chǎn)之前直接運(yùn)行的產(chǎn)品任務(wù)（也許是用git鉤）。此任務(wù)應(yīng)：
  在壓縮模式下編譯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
  最終想法
  就是伙計(jì)們！在短短幾分鐘和幾行JavaScript中，我們?cè)O(shè)法創(chuàng)建了一個(gè)強(qiáng)大的小小的Gulp工作流程。您可以在此處找到完整的文件。你會(huì)添加什麼？
  • >
  經(jīng)常詢問(wèn)有關(guān)GULP和SASS Workflow的問(wèn)題（常見(jiàn)問(wèn)題解答）
  >如何為我的項(xiàng)目安裝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>

  以安裝項(xiàng)目的Gulp和Sass，您需要在計(jì)算機(jī)上安裝Node.js和NPM。一旦擁有這些功能，就可以通過(guò)在終端中運(yùn)行命令NPM安裝命令NPM安裝-Global Gulp-CLI來(lái)全局安裝GULP。之後，導(dǎo)航到您的項(xiàng)目目錄並運(yùn)行NPM INIT創(chuàng)建一個(gè)package.json文件。然後，通過(guò)運(yùn)行NPM安裝-Save-Dev Gulp-Sass。

  >如何使用Gulp？

  來(lái)編譯SASS文件，以使用Gulp編譯SASS文件，需要?jiǎng)?chuàng)建一個(gè)Gulp任務(wù)。在您的Gulpfile.js中，您可以創(chuàng)建一個(gè)名為“ SASS”的任務(wù)，該任務(wù)將您的SASS文件編譯為CSS。這是一個(gè)如何執(zhí)行此操作的簡(jiǎn)單示例：
  
  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'））;
  }） ;
  

  此任務(wù)將在您的SASS目錄中獲取所有.scss文件，使用Gulp-sass將其編譯為CSS，然後輸出所得的CSS文件您的CSS目錄。

  如何觀看SASS文件中的更改並自動(dòng)編譯它們？
  >
  
  GULP提供了一種名為Watch的方法，您可以使用該方法在更改文件時(shí)可以自動(dòng)運(yùn)行任務(wù)。這是您可以修改“ SASS”任務(wù)以查看更改的方法：
  gulp.task（'sass'，function（）{ gulp.watch（'./ sass/*）*/*。 ['sass']）;
  } ）;
  

  現(xiàn)在，每當(dāng)您將.scss文件保存在SASS目錄中時(shí)，“ SASS”任務(wù)都會(huì)自動(dòng)運(yùn)行並將SASS文件編譯到CSS中。 >如何處理SASS文件中的錯(cuò)誤？

  在編譯SASS文件時(shí)，您可能會(huì)遇到語(yǔ)法錯(cuò)誤。您可以使用Gulp-Sass提供的ON方法處理這些錯(cuò)誤。這是您可以將“ SASS”任務(wù)修改為記錄錯(cuò)誤的方法：
  
  gulp.task（'sass'，function（）{ return gulp.src（'./ sass/** /*。 scss'）
  .pipe（sass（）。on（'error'，sass.logerror））
  >如何使用Gulp縮小我的CSS文件？
  
  縮小CSS文件，您可以使用GULP插件稱為Gulp-Clean-CSS。首先，通過(guò)運(yùn)行NPM安裝-Save-dev Gulp-Clean-CSS將其安裝在項(xiàng)目中。然後，您可以創(chuàng)建一個(gè)任務(wù)，該任務(wù)將縮小您的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''））;
  }）;
  
  >
  
  此任務(wù)將在您的樣式目錄中使用所有.css文件Gulp-clean-css，並在您的DIST目錄中輸出所得的CSS文件。