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

>

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

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

<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：文檔工具。它可以解析您的樣式表尋找評論塊，記錄變量，混音，功能和占位符。
如果您的項目使用SASSDOC（應(yīng)該?。瑒t可以在Gulp Workflow中添加自動文檔生成。
• SASSDOC的酷炫事物是可以將其直接輸送到Gulp中，因為它的API是兼容的。因此，您實際上沒有Gulp-sassdoc插件。

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

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

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

  我正在看著你
  >在離開之前，我們?nèi)匀豢梢宰鲂┦裁矗簞?chuàng)建手表任務(wù)。該任務(wù)的目的是注意樣式表的更改以再次重新編譯它們。在項目的Sass側(cè)工作時非常方便，因此您不必每次保存文件時都可以手工運行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òu)建或推動上要做的事情，也許是使用預(yù)先承諾的掛鉤。

  添加最終觸摸

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

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

  >。

  >此外，我們可能可以創(chuàng)建一個可以在部署到生產(chǎ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
  最終想法
  就是伙計們！在短短幾分鐘和幾行JavaScript中，我們設(shè)法創(chuàng)建了一個強大的小小的Gulp工作流程。您可以在此處找到完整的文件。你會添加什么？
  • >
  經(jīng)常詢問有關(guān)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。之后，導(dǎo)航到您的項目目錄并運行NPM INIT創(chuàng)建一個package.json文件。然后，通過運行NPM安裝-Save-Dev Gulp-Sass。

  >如何使用Gulp？

  來編譯SASS文件，以使用Gulp編譯SASS文件，需要創(chuàng)建一個Gulp任務(wù)。在您的Gulpfile.js中，您可以創(chuàng)建一個名為“ SASS”的任務(wù)，該任務(wù)將您的SASS文件編譯為CSS。這是一個如何執(zhí)行此操作的簡單示例：
  
  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文件中的更改并自動編譯它們？
  >
  
  GULP提供了一種名為Watch的方法，您可以使用該方法在更改文件時可以自動運行任務(wù)。這是您可以修改“ SASS”任務(wù)以查看更改的方法：
  gulp.task（'sass'，function（）{ gulp.watch（'./ sass/*）*/*。 ['sass']）;
  }）;
  

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

  在編譯SASS文件時，您可能會遇到語法錯誤。您可以使用Gulp-Sass提供的ON方法處理這些錯誤。這是您可以將“ SASS”任務(wù)修改為記錄錯誤的方法：
  
  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將其安裝在項目中。然后，您可以創(chuàng)建一個任務(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文件。