From 8651b5638ef5e1c5bd8f63beda469c2c053635e3 Mon Sep 17 00:00:00 2001 From: Jake Marsh Date: Mon, 6 Jun 2016 13:24:06 -0700 Subject: [PATCH 1/4] wrap gulp tasks with npm scripts for setting environment --- package.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 458b0911..a5bb4d1d 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,12 @@ "watchify": "^3.7.0" }, "scripts": { - "test": "./node_modules/.bin/gulp test" + "dev": "NODE_ENV=development ./node_modules/.bin/gulp dev", + "build": "NODE_ENV=production ./node_modules/.bin/gulp prod", + "deploy": "NODE_ENV=production ./node_modules/.bin/gulp deploy", + "test": "NODE_ENV=test ./node_modules/.bin/gulp test", + "protractor": "NODE_ENV=test ./node_modules/.bin/gulp protractor", + "unit": "NODE_ENV=test ./node_modules/.bin/gulp unit" }, "license": "MIT" } From 99fd028f4ed56d1bd9698fa3811dd89fffab856b Mon Sep 17 00:00:00 2001 From: Jake Marsh Date: Mon, 6 Jun 2016 13:24:10 -0700 Subject: [PATCH 2/4] update documentation --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 3a745d8f..eca4de04 100644 --- a/README.md +++ b/README.md @@ -12,11 +12,11 @@ A boilerplate using AngularJS, SASS, Gulp, and Browserify that also utilizes [th 1. Clone this repo from `https://github.com/jakemmarsh/angularjs-gulp-browserify-boilerplate.git` 2. Run `npm install` from the root directory -3. Run `gulp dev` (may require installing Gulp globally `npm install gulp -g`) +3. Run `npm run dev` 4. Your browser will automatically be opened and directed to the browser-sync proxy address -5. To prepare assets for production, run the `gulp prod` task (Note: the production task does not fire up the express server, and won't provide you with browser-sync's live reloading. Simply use `gulp dev` during development. More information below) +5. To prepare assets for production, run the `npm run build` script (Note: the production task does not fire up the express server, and won't provide you with browser-sync's live reloading. Simply use `npm run dev` during development. More information below) -Now that `gulp dev` is running, the server is up as well and serving files from the `/build` directory. Any changes in the `/app` directory will be automatically processed by Gulp and the changes will be injected to any open browsers pointed at the proxy address. +Now that `npm run dev` is running, the server is up as well and serving files from the `/build` directory. Any changes in the `/app` directory will be automatically processed by Gulp and the changes will be injected to any open browsers pointed at the proxy address. #### Other resources @@ -109,7 +109,7 @@ Gulp is a "streaming build system", providing a very fast and efficient method f ##### Web Server -Gulp is used here to provide a very basic node/Express web server for viewing and testing your application as you build. It serves static files from the `build/` directory, leaving routing up to AngularJS. All Gulp tasks are configured to automatically reload the server upon file changes. The application is served to `localhost:3002` once you run the `gulp` task. To take advantage of the fast live reload injection provided by browser-sync, you must load the site at the proxy address (within this boilerplate will by default be `localhost:3000`). To change the settings related to live-reload or browser-sync, you can access the UI at `localhost:3001`. +Gulp is used here to provide a very basic node/Express web server for viewing and testing your application as you build. It serves static files from the `build/` directory, leaving routing up to AngularJS. All Gulp tasks are configured to automatically reload the server upon file changes. The application is served to `localhost:3002` once you run the `npm run dev` script. To take advantage of the fast live reload injection provided by browser-sync, you must load the site at the proxy address (within this boilerplate will by default be `localhost:3000`). To change the settings related to live-reload or browser-sync, you can access the UI at `localhost:3001`. ##### Scripts @@ -132,7 +132,7 @@ Just one plugin is necessary for processing our SASS files, and that is `gulp-sa ##### Images -Any images placed within `/app/images` will be automatically copied to the `build/images` directory. If running `gulp prod`, they will also be compressed via imagemin. +Any images placed within `/app/images` will be automatically copied to the `build/images` directory. If running `npm run build`, they will also be compressed via imagemin. ##### Views @@ -142,17 +142,17 @@ Files inside `/app/views/`, on the other hand, go through a slightly more comple ##### Watching files -All of the Gulp processes mentioned above are run automatically when any of the corresponding files in the `/app` directory are changed, and this is thanks to our Gulp watch tasks. Running `gulp dev` will begin watching all of these files, while also serving to `localhost:3002`, and with browser-sync proxy running at `localhost:3000` (by default). +All of the Gulp processes mentioned above are run automatically when any of the corresponding files in the `/app` directory are changed, and this is thanks to our Gulp watch tasks. Running `npm run dev` will begin watching all of these files, while also serving to `localhost:3002`, and with browser-sync proxy running at `localhost:3000` (by default). ##### Production Task -Just as there is the `gulp dev` task for development, there is also a `gulp prod` task for putting your project into a production-ready state. This will run each of the tasks, while also adding the image minification task discussed above. There is also an empty `gulp deploy` task that is included when running the production task. This deploy task can be fleshed out to automatically push your production-ready site to your hosting setup. +Just as there is the `npm run dev` command for development, there is also a `npm run build` command for putting your project into a production-ready state. This will run each of the tasks, while also adding the image minification task discussed above. There is also an empty deploy task (run with `npm run deploy`) that is included when running the production task. This deploy task can be fleshed out to automatically push your production-ready site to your hosting setup. **Reminder:** When running the production task, gulp will not fire up the express server and serve your index.html. This task is designed to be run before the `deploy` step that may copy the files from `/build` to a production web server. ##### Pre-compressing text assets -When running with `gulp prod`, a pre-compressed file is generated in addition to uncompressed file (.html.gz, .js.gz, css.gz). This is done to enable web servers serve compressed content without having to compress it on the fly. Pre-compression is handled by `gzip` task. +When building with `npm run build`, a pre-compressed file is generated in addition to uncompressed file (.html.gz, .js.gz, css.gz). This is done to enable web servers serve compressed content without having to compress it on the fly. Pre-compression is handled by `gzip` task. ##### Testing @@ -164,7 +164,7 @@ A Gulp tasks also exists for running the test framework (discussed in detail bel This boilerplate also includes a simple framework for unit and end-to-end (e2e) testing via [Karma](http://karma-runner.github.io/) and [Jasmine](http://jasmine.github.io/). In order to test AngularJS modules, the [angular.mocks](https://docs.angularjs.org/api/ngMock/object/angular.mock) module is used. -All of the tests can be run at once with the command `gulp test`. However, the tests are broken up into two main categories: +All of the tests can be run at once with the command `npm test`. However, the tests are broken up into two main categories: ##### End-to-End (e2e) Tests @@ -177,7 +177,7 @@ In this boilerplate, two end-to-end test examples are provided: More examples can be seen at the above link for Protractor. -All e2e tests are run with `gulp protractor`. +All e2e tests are run with `npm run protractor`. ##### Unit Tests @@ -190,4 +190,4 @@ An example test is provided for the following types of AngularJS modules: - `unit/directives/example_spec.js` - `unit/constants_spec.js` -All unit tests are run with `gulp unit`. When running unit tests, code coverage is simultaneously calculated and output as an HTML file to the `/coverage` directory. +All unit tests are run with `npm run unit`. When running unit tests, code coverage is simultaneously calculated and output as an HTML file to the `/coverage` directory. From 0a6aad6b6f71d119fd19a79c45ad7cb30ff841ce Mon Sep 17 00:00:00 2001 From: Jake Marsh Date: Mon, 6 Jun 2016 13:30:31 -0700 Subject: [PATCH 3/4] use envify to disable debug info when building for prod --- app/js/on_config.js | 6 +++++- app/js/on_run.js | 2 +- gulp/tasks/browserify.js | 13 ++++++++----- package.json | 1 + 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/app/js/on_config.js b/app/js/on_config.js index 4e88fcb7..e0a2242c 100644 --- a/app/js/on_config.js +++ b/app/js/on_config.js @@ -1,6 +1,10 @@ -function OnConfig($stateProvider, $locationProvider, $urlRouterProvider) { +function OnConfig($stateProvider, $locationProvider, $urlRouterProvider, $compileProvider) { 'ngInject'; + if (process.env.NODE_ENV === 'production') { + $compileProvider.debugInfoEnabled(false); + } + $locationProvider.html5Mode(true); $stateProvider diff --git a/app/js/on_run.js b/app/js/on_run.js index abcf46d1..259a0d91 100644 --- a/app/js/on_run.js +++ b/app/js/on_run.js @@ -5,7 +5,7 @@ function OnRun($rootScope, AppSettings) { $rootScope.$on('$stateChangeSuccess', (event, toState) => { $rootScope.pageTitle = ''; - if ( toState.title ) { + if (toState.title) { $rootScope.pageTitle += toState.title; $rootScope.pageTitle += ' \u2014 '; } diff --git a/gulp/tasks/browserify.js b/gulp/tasks/browserify.js index 3582ff3d..0c18b68c 100644 --- a/gulp/tasks/browserify.js +++ b/gulp/tasks/browserify.js @@ -13,6 +13,8 @@ import uglify from 'gulp-uglify'; import browserSync from 'browser-sync'; import debowerify from 'debowerify'; import ngAnnotate from 'browserify-ngannotate'; +import bulkify from 'bulkify'; +import envify from 'envify'; import handleErrors from '../util/handleErrors'; import bundleLogger from '../util/bundleLogger'; import config from '../config'; @@ -37,11 +39,12 @@ function buildScript(file) { } const transforms = [ - { 'name':babelify, 'options': {}}, - { 'name':debowerify, 'options': {}}, - { 'name':ngAnnotate, 'options': {}}, - { 'name':'brfs', 'options': {}}, - { 'name':'bulkify', 'options': {}} + { name: babelify, options: {} }, + { name: debowerify, options: {} }, + { name: ngAnnotate, options: {} }, + { name: 'brfs', options: {} }, + { name: bulkify, options: {} }, + { name: envify, options: {} } ]; transforms.forEach(function(transform) { diff --git a/package.json b/package.json index a5bb4d1d..26dff362 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "bulkify": "^1.1.1", "debowerify": "^1.3.1", "del": "^2.1.0", + "envify": "^3.4.0", "eslint": "2.2.0", "express": "^4.13.3", "gulp": "^3.9.0", From 1e2295a853f56887e7d501862f7a97a24b9d9cd1 Mon Sep 17 00:00:00 2001 From: Jake Marsh Date: Mon, 6 Jun 2016 13:31:13 -0700 Subject: [PATCH 4/4] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 26dff362..678d2f43 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angularjs-gulp-browserify-boilerplate", - "version": "1.5.10", + "version": "1.6.0", "author": "Jake Marsh ", "description": "Boilerplate using AngularJS, SASS, Gulp, and Browserify while also utilizing best practices.", "repository": {