Breaking: cssnanoからcssoに変更

コンパイル速度が遅かったため乗せ換え。configからcssnanoオプションを削除
sable-virt · Nov 17, 2015 · 328c866 · 328c866
1 parent 227432b
commit 328c866
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 24 deletions.
diff --git a/config.js b/config.js
@@ -8,12 +8,8 @@ module.exports = {
     defaultPath: 'pc',
     // 変更監視時にユニットテストも行うかどうか
     autoTest: true,
-    // AutoPrefixerの設定
+    // CSSの設定
     style: {
-        // cssnanoでの最適化オプション(always:常に,production:Productionのみ,none:しない)
-        optimisation: 'none',   // alwaysにするとコンパイルに時間がかかるようになります
-        cssnano: {
-        },
         autoprefixer: {
             browsers: ['last 3 version', 'ie >= 9', 'Android 4.0'],
             ignore: ['text-size-adjust']

diff --git a/gulp/style.js b/gulp/style.js
@@ -10,37 +10,29 @@ var $ = require('./plugins');
 var autoprefixer = require('autoprefixer');
 var doiuse = require('doiuse');
 var cssMqpacker = require('css-mqpacker');
-var cssnano = require('cssnano');
 
 gulp.task('style', function() {
+    config.style = config.style || {};
     var guideOptions = _.merge({
         out: './guide/'
     }, config.styleguide);
+    var sourcemaps = config.style.sourcemaps || './maps';
 
-    var postCSSPlugins = [
-        autoprefixer(config.style.autoprefixer),
-        doiuse(config.style.autoprefixer),
-        cssMqpacker(config.style.mqpacker)
-    ];
-    if (config.css && config.css.optimisation && config.css.optimisation !== 'none') {
-        if (config.css.optimisation === 'always' || config.IS_PRODUCTION) {
-            postCSSPlugins.push(cssnano(_.merge(config.style.cssnano,{
-                autoprefixer: false
-            })));
-        }
-    }
     return gulp.src(config.path.style.src)
         .pipe($.plumber({errorHandler: $.notify.onError('<%= error.message %>')}))
         .pipe($.frontnote(guideOptions))
         .pipe($.if(!config.IS_PRODUCTION, $.sourcemaps.init()))
         .pipe($.sassLint())
         .pipe($.sassLint.format())
         .pipe($.sassLint.failOnError())
-        .pipe($.sass(_.merge({
-            outputStyle: 'compressed'
-        },config.style.sass)))
-        .pipe($.postcss(postCSSPlugins))
-        .pipe($.if(!config.IS_PRODUCTION, $.sourcemaps.write('./maps')))
+        .pipe($.sass())
+        .pipe($.postcss([
+            autoprefixer(config.style.autoprefixer),
+            doiuse(config.style.autoprefixer),
+            cssMqpacker(config.style.mqpacker)
+        ]))
+        .pipe($.csso())
+        .pipe($.if(!config.IS_PRODUCTION, $.sourcemaps.write(sourcemaps)))
         .pipe(gulp.dest(config.path.style.dest))
         .pipe($.browser.stream({match: "**/*.css"}));
 });
diff --git a/package.json b/package.json
@@ -12,14 +12,14 @@
     "browser-sync": "^2.9.12",
     "connect-modrewrite": "^0.8.1",
     "css-mqpacker": "^4.0.0",
-    "cssnano": "^3.3.2",
     "del": "^2.0.2",
     "doiuse": "^2.0.2",
     "ejs": "^2.3.4",
     "eslint": "^1.9.0",
     "eslint-loader": "^1.1.1",
     "espower-loader": "^1.0.0",
     "gulp": "^3.9.0",
+    "gulp-csso": "^1.0.1",
     "gulp-ejs": "^1.2.1",
     "gulp-foreach": "0.1.0",
     "gulp-frontnote": "^1.0.2",