一個簡單的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中文網其他相關文章！