diff --git a/examples/bower/bundle.config.js b/examples/bower/bundle.config.js index 71d2a7e5..7d51c0bb 100644 --- a/examples/bower/bundle.config.js +++ b/examples/bower/bundle.config.js @@ -29,5 +29,4 @@ module.exports = { src: './bower_components/bootstrap/dist/fonts/**/*.*', base: './bower_components/bootstrap/' } - }; \ No newline at end of file diff --git a/examples/full/bower.json b/examples/full/bower.json new file mode 100644 index 00000000..7f863a63 --- /dev/null +++ b/examples/full/bower.json @@ -0,0 +1,21 @@ +{ + "name": "bower", + "version": "0.0.0", + "authors": [ + "Chris Montgomery " + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "angular": "~1.2.18", + "bootstrap": "~3.1.1", + "jquery": "~2.1.1", + "spin": "~0.0.1" + } +} diff --git a/examples/full/bower_components/angular/angular.js b/examples/full/bower_components/angular/angular.js new file mode 100644 index 00000000..3ee4a614 --- /dev/null +++ b/examples/full/bower_components/angular/angular.js @@ -0,0 +1 @@ +console.log("angular"); \ No newline at end of file diff --git a/examples/full/bower_components/angular/angular.min.js b/examples/full/bower_components/angular/angular.min.js new file mode 100644 index 00000000..59fc618f --- /dev/null +++ b/examples/full/bower_components/angular/angular.min.js @@ -0,0 +1 @@ +console.log("angular.min"); \ No newline at end of file diff --git a/examples/full/bower_components/bootstrap/dist/css/bootstrap.css b/examples/full/bower_components/bootstrap/dist/css/bootstrap.css new file mode 100644 index 00000000..e8d90b60 --- /dev/null +++ b/examples/full/bower_components/bootstrap/dist/css/bootstrap.css @@ -0,0 +1,3 @@ +.bootstrap { + background-color: red; +} \ No newline at end of file diff --git a/examples/full/bower_components/bootstrap/dist/css/bootstrap.min.css b/examples/full/bower_components/bootstrap/dist/css/bootstrap.min.css new file mode 100644 index 00000000..5c3a3e51 --- /dev/null +++ b/examples/full/bower_components/bootstrap/dist/css/bootstrap.min.css @@ -0,0 +1,3 @@ +.bootstrap.min { + background-color: blue; +} \ No newline at end of file diff --git a/examples/full/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot b/examples/full/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot new file mode 100644 index 00000000..4a4ca865 Binary files /dev/null and b/examples/full/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot differ diff --git a/examples/full/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg b/examples/full/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg new file mode 100644 index 00000000..e3e2dc73 --- /dev/null +++ b/examples/full/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg @@ -0,0 +1,229 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/full/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf b/examples/full/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf new file mode 100644 index 00000000..67fa00bf Binary files /dev/null and b/examples/full/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf differ diff --git a/examples/full/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff b/examples/full/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff new file mode 100644 index 00000000..8c54182a Binary files /dev/null and b/examples/full/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff differ diff --git a/examples/full/bower_components/bootstrap/dist/js/bootstrap.js b/examples/full/bower_components/bootstrap/dist/js/bootstrap.js new file mode 100644 index 00000000..09dc24ce --- /dev/null +++ b/examples/full/bower_components/bootstrap/dist/js/bootstrap.js @@ -0,0 +1 @@ +console.log('bootstrap'); \ No newline at end of file diff --git a/examples/full/bower_components/bootstrap/dist/js/bootstrap.min.js b/examples/full/bower_components/bootstrap/dist/js/bootstrap.min.js new file mode 100644 index 00000000..6109fcce --- /dev/null +++ b/examples/full/bower_components/bootstrap/dist/js/bootstrap.min.js @@ -0,0 +1 @@ +console.log('bootstrap.min'); \ No newline at end of file diff --git a/examples/full/bower_components/jquery/dist/jquery.js b/examples/full/bower_components/jquery/dist/jquery.js new file mode 100644 index 00000000..690d2a17 --- /dev/null +++ b/examples/full/bower_components/jquery/dist/jquery.js @@ -0,0 +1 @@ +console.log("jquery"); \ No newline at end of file diff --git a/examples/full/bower_components/jquery/dist/jquery.min.js b/examples/full/bower_components/jquery/dist/jquery.min.js new file mode 100644 index 00000000..0443159d --- /dev/null +++ b/examples/full/bower_components/jquery/dist/jquery.min.js @@ -0,0 +1 @@ +console.log("jquery.min"); \ No newline at end of file diff --git a/examples/full/bower_components/spin/spin.js b/examples/full/bower_components/spin/spin.js new file mode 100644 index 00000000..5c3eb995 --- /dev/null +++ b/examples/full/bower_components/spin/spin.js @@ -0,0 +1 @@ +console.log("spin") \ No newline at end of file diff --git a/examples/full/bundle.config.js b/examples/full/bundle.config.js new file mode 100644 index 00000000..ae97f002 --- /dev/null +++ b/examples/full/bundle.config.js @@ -0,0 +1,52 @@ +var prodLikeEnvs = ['production', 'staging']; // when NODE_ENV=staging or NODE_ENV=production +module.exports = { + bundle: { + vendor: { + scripts: [ + {src: './bower_components/jquery/jquery.js', minSrc: './bower_components/jquery/jquery.min.js'}, + {src: './bower_components/angular/angular.js', minSrc: './bower_components/angular/angular.min.js'}, + './bower_components/spin/spin.js' + ], + styles: { + src: './bower_components/bootstrap/dist/css/bootstrap.css', + minSrc: './bower_components/bootstrap/dist/css/bootstrap.min.css' + }, + options: { + useMin: prodLikeEnvs, // pre-minified files + uglify: false, // never let bundler minify js since bower already ships with minified versions + rev: prodLikeEnvs // file revisioning + } + }, + article: { + scripts: './lib/article/**/*.js', + styles: './lib/article/**/*.less', // if you supply .less files they will be compiled to .css for you + options: { + uglify: prodLikeEnvs, + rev: prodLikeEnvs + } + }, + main: { + scripts: [ + './js/app.js', + './js/controllers.js', + './js/directives.js', + './js/filters.js' + ], + styles: [ + './styles/**/*.css', + './styles/**/*.less' // mix of file types + ], + options: { + uglify: prodLikeEnvs, + rev: prodLikeEnvs + } + } + }, + copy: [ + { + src: './bower_components/bootstrap/dist/fonts/**/*.*', + base: './bower_components/bootstrap/dist/' + }, + './images/**/*.*' + ] +}; \ No newline at end of file diff --git a/examples/full/bundle.result.json b/examples/full/bundle.result.json new file mode 100644 index 00000000..1030231a --- /dev/null +++ b/examples/full/bundle.result.json @@ -0,0 +1,14 @@ +{ + "vendor": { + "styles": "", + "scripts": "" + }, + "article": { + "styles": "", + "scripts": "" + }, + "main": { + "styles": "", + "scripts": "" + } +} \ No newline at end of file diff --git a/examples/full/gulpfile.js b/examples/full/gulpfile.js new file mode 100644 index 00000000..c6311825 --- /dev/null +++ b/examples/full/gulpfile.js @@ -0,0 +1,21 @@ +var gulp = require('gulp'), + rimraf = require('gulp-rimraf'), + bundle = require('../../index'); + +gulp.task('bundle', ['clean'], function () { + + process.env.NODE_ENV = 'production'; // hardcode to always run in production mode + + return gulp.src('./bundle.config.js') + .pipe(bundle()) + .pipe(bundle.results({ + dest: './', + pathPrefix: '/public/' + })) + .pipe(gulp.dest('./public')); +}); + +gulp.task('clean', function () { + return gulp.src('./public', { read: false }) + .pipe(rimraf()); +}); \ No newline at end of file diff --git a/examples/full/images/empire_icon.png b/examples/full/images/empire_icon.png new file mode 100644 index 00000000..84d302f6 Binary files /dev/null and b/examples/full/images/empire_icon.png differ diff --git a/examples/full/images/rebel_icon.png b/examples/full/images/rebel_icon.png new file mode 100644 index 00000000..faaa9f01 Binary files /dev/null and b/examples/full/images/rebel_icon.png differ diff --git a/examples/full/js/app.js b/examples/full/js/app.js new file mode 100644 index 00000000..2d361da9 --- /dev/null +++ b/examples/full/js/app.js @@ -0,0 +1 @@ +//placeholder \ No newline at end of file diff --git a/examples/full/js/controllers.js b/examples/full/js/controllers.js new file mode 100644 index 00000000..2d361da9 --- /dev/null +++ b/examples/full/js/controllers.js @@ -0,0 +1 @@ +//placeholder \ No newline at end of file diff --git a/examples/full/js/directives.js b/examples/full/js/directives.js new file mode 100644 index 00000000..2d361da9 --- /dev/null +++ b/examples/full/js/directives.js @@ -0,0 +1 @@ +//placeholder \ No newline at end of file diff --git a/examples/full/js/filters.js b/examples/full/js/filters.js new file mode 100644 index 00000000..2d361da9 --- /dev/null +++ b/examples/full/js/filters.js @@ -0,0 +1 @@ +//placeholder \ No newline at end of file diff --git a/examples/full/lib/article/page.js b/examples/full/lib/article/page.js new file mode 100644 index 00000000..2d361da9 --- /dev/null +++ b/examples/full/lib/article/page.js @@ -0,0 +1 @@ +//placeholder \ No newline at end of file diff --git a/examples/full/lib/article/scroll.js b/examples/full/lib/article/scroll.js new file mode 100644 index 00000000..2d361da9 --- /dev/null +++ b/examples/full/lib/article/scroll.js @@ -0,0 +1 @@ +//placeholder \ No newline at end of file diff --git a/examples/full/lib/article/styles/page.less b/examples/full/lib/article/styles/page.less new file mode 100644 index 00000000..5e5c5e6e --- /dev/null +++ b/examples/full/lib/article/styles/page.less @@ -0,0 +1,3 @@ +.page { + background-color: red; +} \ No newline at end of file diff --git a/examples/full/package.json b/examples/full/package.json new file mode 100644 index 00000000..fae1901e --- /dev/null +++ b/examples/full/package.json @@ -0,0 +1,15 @@ +{ + "name": "full", + "version": "0.0.0", + "description": "", + "main": "bundle.config.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "gulp": "^3.8.6", + "gulp-rimraf": "^0.1.0" + } +} diff --git a/examples/full/public/article-c2107e48.css b/examples/full/public/article-c2107e48.css new file mode 100755 index 00000000..c0095b06 --- /dev/null +++ b/examples/full/public/article-c2107e48.css @@ -0,0 +1,5 @@ +.page { + background-color: red; +} + +/*# sourceMappingURL=maps/article-c2107e48.css.map */ \ No newline at end of file diff --git a/examples/full/public/article-d41d8cd9.js b/examples/full/public/article-d41d8cd9.js new file mode 100755 index 00000000..db87c568 --- /dev/null +++ b/examples/full/public/article-d41d8cd9.js @@ -0,0 +1,2 @@ + +//# sourceMappingURL=maps/article-d41d8cd9.js.map \ No newline at end of file diff --git a/examples/full/public/fonts/glyphicons-halflings-regular.eot b/examples/full/public/fonts/glyphicons-halflings-regular.eot new file mode 100644 index 00000000..4a4ca865 Binary files /dev/null and b/examples/full/public/fonts/glyphicons-halflings-regular.eot differ diff --git a/examples/full/public/fonts/glyphicons-halflings-regular.svg b/examples/full/public/fonts/glyphicons-halflings-regular.svg new file mode 100644 index 00000000..e3e2dc73 --- /dev/null +++ b/examples/full/public/fonts/glyphicons-halflings-regular.svg @@ -0,0 +1,229 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/full/public/fonts/glyphicons-halflings-regular.ttf b/examples/full/public/fonts/glyphicons-halflings-regular.ttf new file mode 100644 index 00000000..67fa00bf Binary files /dev/null and b/examples/full/public/fonts/glyphicons-halflings-regular.ttf differ diff --git a/examples/full/public/fonts/glyphicons-halflings-regular.woff b/examples/full/public/fonts/glyphicons-halflings-regular.woff new file mode 100644 index 00000000..8c54182a Binary files /dev/null and b/examples/full/public/fonts/glyphicons-halflings-regular.woff differ diff --git a/examples/full/public/images/empire_icon.png b/examples/full/public/images/empire_icon.png new file mode 100644 index 00000000..84d302f6 Binary files /dev/null and b/examples/full/public/images/empire_icon.png differ diff --git a/examples/full/public/images/rebel_icon.png b/examples/full/public/images/rebel_icon.png new file mode 100644 index 00000000..faaa9f01 Binary files /dev/null and b/examples/full/public/images/rebel_icon.png differ diff --git a/examples/full/public/main-41e43699.css b/examples/full/public/main-41e43699.css new file mode 100755 index 00000000..e6064788 --- /dev/null +++ b/examples/full/public/main-41e43699.css @@ -0,0 +1,8 @@ +.legacy { + background-color: green; +} +body { + background-color: blue; +} + +/*# sourceMappingURL=maps/main-41e43699.css.map */ \ No newline at end of file diff --git a/examples/full/public/main-d41d8cd9.js b/examples/full/public/main-d41d8cd9.js new file mode 100755 index 00000000..be527dd3 --- /dev/null +++ b/examples/full/public/main-d41d8cd9.js @@ -0,0 +1,2 @@ + +//# sourceMappingURL=maps/main-d41d8cd9.js.map \ No newline at end of file diff --git a/examples/full/public/maps/article-c2107e48.css.map b/examples/full/public/maps/article-c2107e48.css.map new file mode 100755 index 00000000..6ee270b6 --- /dev/null +++ b/examples/full/public/maps/article-c2107e48.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["lib/article/styles/page.less"],"names":[],"mappings":"AAAA;EACE,qBAAA","file":"article-c2107e48.css","sourcesContent":[".page {\n background-color: red;\n}"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/examples/full/public/maps/article-d41d8cd9.js.map b/examples/full/public/maps/article-d41d8cd9.js.map new file mode 100755 index 00000000..f9c8a3fa --- /dev/null +++ b/examples/full/public/maps/article-d41d8cd9.js.map @@ -0,0 +1 @@ +{"version":3,"file":"article-d41d8cd9.js","sources":["lib/article/page.js","lib/article/scroll.js"],"names":[],"mappings":"","sourcesContent":["//placeholder","//placeholder"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/examples/full/public/maps/main-41e43699.css.map b/examples/full/public/maps/main-41e43699.css.map new file mode 100755 index 00000000..04e9a293 --- /dev/null +++ b/examples/full/public/maps/main-41e43699.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["styles/legacy.css","styles/main.less"],"names":[],"mappings":"AAAA;AACA;AACA;ACFA;EACE,sBAAA","file":"main-41e43699.css","sourcesContent":[".legacy {\n background-color: green;\n}","body {\n background-color: blue;\n}"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/examples/full/public/maps/main-d41d8cd9.js.map b/examples/full/public/maps/main-d41d8cd9.js.map new file mode 100755 index 00000000..ba972d7b --- /dev/null +++ b/examples/full/public/maps/main-d41d8cd9.js.map @@ -0,0 +1 @@ +{"version":3,"file":"main-d41d8cd9.js","sources":["js/app.js","js/controllers.js","js/directives.js","js/filters.js"],"names":[],"mappings":"","sourcesContent":["//placeholder","//placeholder","//placeholder","//placeholder"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/examples/full/public/maps/vendor-bfff3428.css.map b/examples/full/public/maps/vendor-bfff3428.css.map new file mode 100755 index 00000000..9aff9ff4 --- /dev/null +++ b/examples/full/public/maps/vendor-bfff3428.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["bower_components/bootstrap/dist/css/bootstrap.min.css"],"names":[],"mappings":"AAAA;AACA;AACA","file":"vendor-bfff3428.css","sourcesContent":[".bootstrap.min {\n background-color: blue;\n}"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/examples/full/public/maps/vendor-fc7efeba.js.map b/examples/full/public/maps/vendor-fc7efeba.js.map new file mode 100755 index 00000000..544c943a --- /dev/null +++ b/examples/full/public/maps/vendor-fc7efeba.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["bower_components/angular/angular.min.js","bower_components/spin/spin.js"],"names":[],"mappings":"AAAA;ACAA","file":"vendor-fc7efeba.js","sourcesContent":["console.log(\"angular.min\");","console.log(\"spin\")"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/examples/full/public/vendor-bfff3428.css b/examples/full/public/vendor-bfff3428.css new file mode 100755 index 00000000..9104f4e9 --- /dev/null +++ b/examples/full/public/vendor-bfff3428.css @@ -0,0 +1,4 @@ +.bootstrap.min { + background-color: blue; +} +/*# sourceMappingURL=maps/vendor-bfff3428.css.map */ \ No newline at end of file diff --git a/examples/full/public/vendor-fc7efeba.js b/examples/full/public/vendor-fc7efeba.js new file mode 100755 index 00000000..04d2044e --- /dev/null +++ b/examples/full/public/vendor-fc7efeba.js @@ -0,0 +1,3 @@ +console.log("angular.min"); +console.log("spin") +//# sourceMappingURL=maps/vendor-fc7efeba.js.map \ No newline at end of file diff --git a/examples/full/styles/legacy.css b/examples/full/styles/legacy.css new file mode 100644 index 00000000..4a7c06ea --- /dev/null +++ b/examples/full/styles/legacy.css @@ -0,0 +1,3 @@ +.legacy { + background-color: green; +} \ No newline at end of file diff --git a/examples/full/styles/main.less b/examples/full/styles/main.less new file mode 100644 index 00000000..aabdee4a --- /dev/null +++ b/examples/full/styles/main.less @@ -0,0 +1,3 @@ +body { + background-color: blue; +} \ No newline at end of file diff --git a/readme.md b/readme.md index 3ac8a58d..4c50b893 100644 --- a/readme.md +++ b/readme.md @@ -70,7 +70,91 @@ Will result in the following folder structure: `vendor-d66b96f5.js ``` -see [the examples folder](examples) for more detail +## Advanced Usage + +See [the examples folder](examples) for many other config options. + +Given a `bundle.config.js` + +```js +var prodLikeEnvs = ['production', 'staging']; // when NODE_ENV=staging or NODE_ENV=production +module.exports = { + bundle: { + vendor: { + scripts: [ + {src: './bower_components/jquery/jquery.js', minSrc: './bower_components/jquery/jquery.min.js'}, + {src: './bower_components/angular/angular.js', minSrc: './bower_components/angular/angular.min.js'}, + './bower_components/spin/spin.js' + ], + styles: { + src: './bower_components/bootstrap/dist/css/bootstrap.css', + minSrc: './bower_components/bootstrap/dist/css/bootstrap.min.css' + }, + options: { + useMin: prodLikeEnvs, // pre-minified files + uglify: false, // never let bundler minify js since bower already ships with minified versions + rev: prodLikeEnvs // file revisioning + } + }, + article: { + scripts: './lib/article/**/*.js', + styles: './lib/article/**/*.less', // if you supply .less files they will be compiled to .css for you + options: { + uglify: prodLikeEnvs, + rev: prodLikeEnvs + } + }, + main: { + scripts: [ + './js/app.js', + './js/controllers.js', + './js/directives.js', + './js/filters.js' + ], + styles: [ + './styles/**/*.css', + './styles/**/*.less' // mix of file types + ], + options: { + uglify: prodLikeEnvs, + rev: prodLikeEnvs + } + } + }, + copy: [ + { + src: './bower_components/bootstrap/dist/fonts/**/*.*', + base: './bower_components/bootstrap/dist/' + }, + './images/**/*.*' + ] +}; +``` + +Running + +```bash +$ NODE_ENV=production gulp bundle +``` + +Will result in + +```json +{ + "article": { + "styles": "", + "scripts": "" + }, + "vendor": { + "styles": "", + "scripts": "" + }, + "main": { + "styles": "", + "scripts": "" + } +} +``` ## Options @@ -82,7 +166,7 @@ Default: `.` Base directory when resolving src globs. Useful when running gulp tasks from a `gulpfile` outside the project's root. -## Use your bundles +## Integrating bundles into your app You can programmatically render your bundles into your view via [your favorite templating engine](https://www.google.com/webhp?ion=1&espv=2&ie=UTF-8#q=node%20js%20templating%20engine) @@ -101,6 +185,21 @@ gulp.task('bundle', function() { }); ``` +Which results in a `bundle.result.json` file similar to: + +```json +{ + "main": { + "styles": "", + "scripts": "" + }, + "vendor": { + "scripts": "", + "styles": "" + } +} +``` + [See here for a full example using hogan](examples/express-app-using-result-json/readme.md) ## TODO