gulp で UnCSS を使う

Blog で使っている Clean Blog - Bootstrap Blog Theme - Start Bootstrap のテーマの CSS を最適化するため、gulp で UnCSS のタスクを動かしました。
使用したツールと設定内容について記載します。

gulp-uncss は DEPRECATED になった。

gulp-uncss という uncss の plugin がありますが、2019年4月段階で DEPRECATED になっています。
ben-eb/gulp-uncss: DEPRECATED. Remove unused CSS selectors.

README.md に postcss/gulp-postcss: Pipe CSS through PostCSS processors with a single parse と uncss/postcss-uncss: Use uncss as a postcss plugin を組み合わせて同じことが実現できる旨が記載されています。これら2つをインストールして設定していきます。

gulp-postcss postcss-uncss のインストール、設定

gulp-postcss postcss-uncss のインストール と設定を行います。

インストール

npm i -D gulp-postcss postcss-uncss     

gulp ファイルの設定

gulpfile.js に以下のタスクを追加しました。

• gulpfile.js
  

  var postcss = require('gulp-postcss');
  var uncss = require('postcss-uncss');
  
  // Run uncss
  gulp.task('uncss-bootstrap', function () {
      var plugins = [
          uncss({
              // 解析対象のhtml の定義
              html: ['index.html', 'about.html', 'contact.html','post.html'],
              // 削除したくないcss クラス定義の追加    
              ignore: ['.glyphicon',
                       '.glyphicon-user',
                       '.glyphicon-folder-close',
                       '.glyphicon-calendar',
                       '.glyphicon-comment']
          }),
      ];
      return gulp.src('vendor/bootstrap/css/bootstrap.css')
          .pipe(postcss(plugins))
          .pipe(rename({
              // ファイルの末尾は`.optimized.css` にする。
              extname: '.optimized.css'
            }))
          .pipe(gulp.dest('vendor/bootstrap/css'));
  });
  
  // Run uncss
  gulp.task('uncss-font-awesome', function () {
      var plugins = [
          uncss({ 
              html: ['index.html', 'about.html', 'contact.html','post.html']
          }),
      ];
      return gulp.src('vendor/font-awesome/css/font-awesome.css')
          .pipe(postcss(plugins))
          .pipe(rename({
              extname: '.optimized.css'
            }))
          .pipe(gulp.dest('vendor/font-awesome/css'));
  });
  

package.json に scripts の追加

npm run で実行できるように以下、script を追加しました。

  "scripts": {
    "uncss-bootstrap": "gulp uncss-bootstrap",
    "uncss-font-awesome": "gulp uncss-font-awesome"
  }

タスクの実行

以下のように、npm run でタスクが実行できます。

npm run uncss-bootstrap
> clean-blog@3.3.7 uncss-bootstrap ~/Sandbox/startbootstrap-clean-blog-3.3.7
> gulp uncss-bootstrap

[14:45:44] Using gulpfile ~/Sandbox/startbootstrap-clean-blog-3.3.7/gulpfile.js
[14:45:44] Starting 'uncss-bootstrap'...
[14:45:45] Finished 'uncss-bootstrap' after 1.01 s

npm run uncss-font-awesome
.7 uncss-font-awesome ~/Sandbox/startbootstrap-clean-blog-3.3.7
> gulp uncss-font-awesome

[14:46:02] Using gulpfile ~/Sandbox/startbootstrap-clean-blog-3.3.7/gulpfile.js
[14:46:02] Starting 'uncss-font-awesome'...
[14:46:02] Finished 'uncss-font-awesome' after 556 ms

作成したファイル、CSSの配置先

Github に アップしました。
kemsakurai/startbootstrap-clean-blog-3.3.7: Generate bootstrap.css and fontawesome.css optimized for Clean Blog 3.3.7

参考

• gulp-uncss - npm
• gulp の gulp-rename モジュールを使って出力するファイルに .min をつける方法 | phiary
• 僕がGulpで使っているプラグインとnode.jsモジュール一覧 - Qiita

以上です。