Merge pull request #4 from reducejs/refactor

Refactor.

Author: zoubin

README.md

@@ -0,0 +1,59 @@
+'use strict'
+
+const reduce = require('reduce-css')
+const gulp = require('gulp')
+const del = require('del')
+const path = require('path')
+const build = path.join(__dirname, 'build')
+
+gulp.task('clean', function () {
+  return del(build)
+})
+
+gulp.task('build', ['clean'], function () {
+  let basedir = path.join(__dirname, 'src')
+  let b = reduce.create({
+    basedir,
+    resolve: {
+      paths: [path.join(__dirname, 'src', 'web_modules')],
+    },
+  })
+  return reduce.src('page/**/index.css', { cwd: basedir })
+    .pipe(reduce.bundle(b, {
+      groups: 'page/**/index.css',
+      common: 'common.css',
+    }))
+    .pipe(reduce.dest(build, null, {
+      maxSize: 0,
+      name: '[name].[hash]',
+      assetOutFolder: path.join(build, 'assets'),
+    }))
+})
+
+gulp.task('watch', ['clean'], function () {
+  let basedir = path.join(__dirname, 'src')
+  let b = reduce.create({
+    basedir,
+    resolve: {
+      paths: [path.join(__dirname, 'src', 'web_modules')],
+    },
+  })
+  let count = 1
+  return gulp.src('page/**/index.css', { cwd: basedir })
+    .pipe(reduce.watch(b, {
+      groups: 'page/**/index.css',
+      common: 'common.css',
+    }, { entryGlob: 'page/**/index.css' }))
+    .on('bundle', function (bundleStream) {
+      bundleStream.pipe(reduce.dest(build, null, {
+        maxSize: 0,
+        name: '[name].[hash]',
+        assetOutFolder: path.join(build, 'assets'),
+      }))
+      .on('data', file => console.log('bundle:', file.relative))
+      .once('end', function () {
+        console.log('-'.repeat(40), count++ + '')
+      })
+    })
+})
+

example/gulp/multi/gulpfile.js

@@ -1,6 +1,6 @@
 @external "reset";
 @import "helper/color";
-a{
+.blue {
   color: $blue;
 }
 

example/multiple-bundles/src/node_modules/reset/index.css renamed to example/gulp/multi/src/node_modules/reset/index.css

@@ -1,7 +1,11 @@
 @external "reset";
 @external "component/button";
 @import "helper/color";
+.red {
+  color: $red;
+}
+
 .button {
-  background-color: $green;
+  background-color: $red;
 }
 

example/single-bundle/src/page/blue/index.css renamed to example/gulp/multi/src/page/blue/index.css

@@ -0,0 +1,56 @@
+'use strict'
+
+const reduce = require('reduce-css')
+const gulp = require('gulp')
+const del = require('del')
+const path = require('path')
+const build = path.join(__dirname, 'build')
+
+gulp.task('clean', function () {
+  return del(build)
+})
+
+gulp.task('build', ['clean'], function () {
+  let basedir = path.join(__dirname, 'src')
+  let b = reduce.create({
+    basedir,
+    resolve: {
+      paths: [path.join(__dirname, 'src', 'web_modules')],
+    },
+  })
+  return reduce.src('page/**/index.css', { cwd: basedir })
+    .pipe(reduce.bundle(b, 'bundle.css'))
+    .pipe(reduce.dest(build, null, {
+      maxSize: 0,
+      name: '[name].[hash]',
+      assetOutFolder: path.join(build, 'assets'),
+    }))
+})
+
+gulp.task('watch', ['clean'], function () {
+  let basedir = path.join(__dirname, 'src')
+  let b = reduce.create({
+    basedir,
+    resolve: {
+      paths: [path.join(__dirname, 'src', 'web_modules')],
+    },
+  })
+  let count = 1
+  return gulp.src('page/**/index.css', { cwd: basedir })
+    .pipe(reduce.watch(b, 'bundle.css', { entryGlob: 'page/**/index.css' }))
+    .on('bundle', function (bundleStream) {
+      bundleStream.pipe(reduce.dest(build, null, {
+        maxSize: 0,
+        name: '[name].[hash]',
+        assetOutFolder: path.join(build, 'assets'),
+      }))
+      .on('data', file => console.log('bundle:', file.relative))
+      .once('end', function () {
+        console.log('-'.repeat(40), cout++ + '')
+        if (count > 3) {
+          b.close()
+        }
+      })
+    })
+})
+

example/single-bundle/src/page/red/index.css renamed to example/gulp/multi/src/page/red/index.css

@@ -1,4 +1,4 @@
-@external "component/button";
+@external "reset";
 @import "helper/color";
 .blue {
   color: $blue;

example/multiple-bundles/src/web_modules/component/button/button.png renamed to example/gulp/multi/src/web_modules/component/button/button.png

@@ -1,11 +1,11 @@
+@external "reset";
 @external "component/button";
 @import "helper/color";
 .red {
   color: $red;
 }
 
-/* overwrite the default button style */
 .button {
-  background-color: $green;
+  background-color: $red;
 }
 

example/multiple-bundles/src/web_modules/component/button/index.css renamed to example/gulp/multi/src/web_modules/component/button/index.css

@@ -0,0 +1,18 @@
+'use strict'
+
+const del = require('del')
+const reduce = require('reduce-css')
+
+const build = __dirname + '/build'
+const basedir = __dirname + '/src'
+const b = reduce.create({ basedir })
+del(build).then(function () {
+  reduce.src('*.css', { cwd: basedir })
+    .pipe(reduce.bundle(b, 'bundle.css'))
+    .pipe(reduce.dest(build, null, {
+      maxSize: 0,
+      name: '[name].[hash]',
+      assetOutFolder: build + '/assets',
+    }))
+})
+

example/multiple-bundles/src/web_modules/helper/color/index.css renamed to example/gulp/multi/src/web_modules/helper/color/index.css

@@ -0,0 +1,24 @@
+'use strict'
+
+const del = require('del')
+const reduce = require('reduce-css')
+
+const build = __dirname + '/build'
+const basedir = __dirname + '/src'
+const b = reduce.create({ basedir })
+b.on('common.map', function (map) {
+  console.log('bundles:', Object.keys(map).join(', '))
+})
+del(build).then(function () {
+  reduce.src('*.css', { cwd: basedir })
+    .pipe(reduce.bundle(b, {
+      groups: '*.css',
+      common: 'common.css',
+    }))
+    .pipe(reduce.dest(build, null, {
+      maxSize: 0,
+      name: '[name].[hash]',
+      assetOutFolder: build + '/assets',
+    }))
+})
+

example/gulp/reduce/gulpfile.js

@@ -1,6 +1,6 @@
-@deps "./reset";
+@external "reset";
 @import "color";
-a{
+.blue {
   color: $blue;
 }
 

example/single-bundle/src/node_modules/reset/index.css renamed to example/gulp/reduce/src/node_modules/reset/index.css

@@ -0,0 +1,6 @@
+@external "reset";
+@external "./button";
+@import "color";
+.red {
+  color: $red;
+}