Blog で
使用した
gulp-uncss は DEPRECATED に なった。
gulp-uncss と
ben-eb/gulp-uncss: DEPRECATED. Remove unused CSS selectors.
README.md
に
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
で
"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
以上です。
コメント