2 |
Directive title: {{title}}
3 |
This is an example of a directive, click me!
4 |
Directive is not loaded.
11 |
--------------------------------------------------------------------------------
/gulp/config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |
3 | browserPort: 3000,
4 | UIPort: 3001,
5 | testPort: 3002,
6 |
7 | sourceDir: './app/',
8 | buildDir: './build/',
9 |
10 | styles: {
11 | src: 'app/styles/**/*.scss',
12 | dest: 'build/css',
13 | prodSourcemap: false,
14 | sassIncludePaths: []
15 | },
16 |
17 | scripts: {
18 | src: 'app/js/**/*.js',
19 | dest: 'build/js',
20 | test: 'test/**/*.js',
21 | gulp: 'gulp/**/*.js'
22 | },
23 |
24 | images: {
25 | src: 'app/images/**/*',
26 | dest: 'build/images'
27 | },
28 |
29 | fonts: {
30 | src: ['app/fonts/**/*'],
31 | dest: 'build/fonts'
32 | },
33 |
34 | assetExtensions: [
35 | 'js',
36 | 'css',
37 | 'png',
38 | 'jpe?g',
39 | 'gif',
40 | 'svg',
41 | 'eot',
42 | 'otf',
43 | 'ttc',
44 | 'ttf',
45 | 'woff2?'
46 | ],
47 |
48 | views: {
49 | index: 'app/index.html',
50 | src: 'app/views/**/*.html',
51 | dest: 'app/js'
52 | },
53 |
54 | gzip: {
55 | src: 'build/**/*.{html,xml,json,css,js,js.map,css.map}',
56 | dest: 'build/',
57 | options: {}
58 | },
59 |
60 | browserify: {
61 | bundleName: 'main.js',
62 | prodSourcemap: false
63 | },
64 |
65 | test: {
66 | karma: 'test/karma.conf.js',
67 | protractor: 'test/protractor.conf.js'
68 | },
69 |
70 | init: function() {
71 | this.views.watch = [
72 | this.views.index,
73 | this.views.src
74 | ];
75 |
76 | return this;
77 | }
78 |
79 | }.init();
80 |
--------------------------------------------------------------------------------
/gulp/index.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs';
2 | import gulp from 'gulp';
3 | import onlyScripts from './util/scriptFilter';
4 |
5 | const tasks = fs.readdirSync('./gulp/tasks/').filter(onlyScripts);
6 |
7 | // Ensure process ends after all Gulp tasks are finished
8 | gulp.on('stop', function () {
9 | if ( !global.isWatching ) {
10 | process.nextTick(function () {
11 | process.exit(0);
12 | });
13 | }
14 | });
15 |
16 | tasks.forEach((task) => {
17 | require('./tasks/' + task);
18 | });
19 |
--------------------------------------------------------------------------------
/gulp/tasks/browserSync.js:
--------------------------------------------------------------------------------
1 | import config from '../config';
2 | import url from 'url';
3 | import browserSync from 'browser-sync';
4 | import gulp from 'gulp';
5 |
6 | gulp.task('browserSync', function() {
7 |
8 | const DEFAULT_FILE = 'index.html';
9 | const ASSET_EXTENSION_REGEX = new RegExp(`\\b(?!\\?)\\.(${config.assetExtensions.join('|')})\\b(?!\\.)`, 'i');
10 |
11 | browserSync.init({
12 | server: {
13 | baseDir: config.buildDir,
14 | middleware: function(req, res, next) {
15 | let fileHref = url.parse(req.url).href;
16 |
17 | if ( !ASSET_EXTENSION_REGEX.test(fileHref) ) {
18 | req.url = '/' + DEFAULT_FILE;
19 | }
20 |
21 | return next();
22 | }
23 | },
24 | port: config.browserPort,
25 | ui: {
26 | port: config.UIPort
27 | },
28 | ghostMode: {
29 | links: false
30 | }
31 | });
32 |
33 | });
34 |
--------------------------------------------------------------------------------
/gulp/tasks/browserify.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import gulpif from 'gulp-if';
3 | import source from 'vinyl-source-stream';
4 | import sourcemaps from 'gulp-sourcemaps';
5 | import buffer from 'vinyl-buffer';
6 | import streamify from 'gulp-streamify';
7 | import watchify from 'watchify';
8 | import browserify from 'browserify';
9 | import babelify from 'babelify';
10 | import uglify from 'gulp-uglify';
11 | import browserSync from 'browser-sync';
12 | import debowerify from 'debowerify';
13 | import ngAnnotate from 'browserify-ngannotate';
14 | import bulkify from 'bulkify';
15 | import envify from 'envify';
16 | import handleErrors from '../util/handleErrors';
17 | import bundleLogger from '../util/bundleLogger';
18 | import config from '../config';
19 |
20 | // Based on: http://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/
21 | function buildScript(file) {
22 |
23 | const shouldCreateSourcemap = !global.isProd || config.browserify.prodSourcemap;
24 |
25 | let bundler = browserify({
26 | entries: [config.sourceDir + 'js/' + file],
27 | debug: shouldCreateSourcemap,
28 | cache: {},
29 | packageCache: {},
30 | fullPaths: !global.isProd
31 | });
32 |
33 | if ( !global.isProd ) {
34 | bundler = watchify(bundler);
35 |
36 | bundler.on('update', rebundle);
37 | }
38 |
39 | const transforms = [
40 | { name: babelify, options: {} },
41 | { name: debowerify, options: {} },
42 | { name: ngAnnotate, options: {} },
43 | { name: 'brfs', options: {} },
44 | { name: bulkify, options: {} },
45 | { name: envify, options: {} }
46 | ];
47 |
48 | transforms.forEach(function(transform) {
49 | bundler.transform(transform.name, transform.options);
50 | });
51 |
52 | function rebundle() {
53 | bundleLogger.start();
54 |
55 | const stream = bundler.bundle();
56 | const sourceMapLocation = global.isProd ? './' : '';
57 |
58 | return stream
59 | .on('error', handleErrors)
60 | .on('end', bundleLogger.end)
61 | .pipe(source(file))
62 | .pipe(gulpif(shouldCreateSourcemap, buffer()))
63 | .pipe(gulpif(shouldCreateSourcemap, sourcemaps.init({ loadMaps: true })))
64 | .pipe(gulpif(global.isProd, streamify(uglify({
65 | compress: { drop_console: true } // eslint-disable-line camelcase
66 | }))))
67 | .pipe(gulpif(shouldCreateSourcemap, sourcemaps.write(sourceMapLocation)))
68 | .pipe(gulp.dest(config.scripts.dest))
69 | .pipe(browserSync.stream());
70 | }
71 |
72 | return rebundle();
73 |
74 | }
75 |
76 | gulp.task('browserify', function() {
77 |
78 | return buildScript('main.js');
79 |
80 | });
81 |
--------------------------------------------------------------------------------
/gulp/tasks/clean.js:
--------------------------------------------------------------------------------
1 | import config from '../config';
2 | import gulp from 'gulp';
3 | import del from 'del';
4 |
5 | gulp.task('clean', function() {
6 |
7 | return del([config.buildDir]);
8 |
9 | });
10 |
--------------------------------------------------------------------------------
/gulp/tasks/deploy.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 |
3 | gulp.task('deploy', ['prod'], function() {
4 |
5 | // Any deployment logic should go here
6 |
7 | });
--------------------------------------------------------------------------------
/gulp/tasks/development.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import runSequence from 'run-sequence';
3 |
4 | gulp.task('dev', ['clean'], function(cb) {
5 |
6 | global.isProd = false;
7 |
8 | runSequence(['styles', 'images', 'fonts', 'views'], 'browserify', 'watch', cb);
9 |
10 | });
11 |
--------------------------------------------------------------------------------
/gulp/tasks/eslint.js:
--------------------------------------------------------------------------------
1 | import config from '../config';
2 | import gulp from 'gulp';
3 | import eslint from 'gulp-eslint';
4 |
5 | gulp.task('eslint', () => {
6 | return gulp.src([config.scripts.src, '!app/js/templates.js', config.scripts.test, config.scripts.gulp])
7 | .pipe(eslint())
8 | .pipe(eslint.format())
9 | .pipe(eslint.failAfterError());
10 | });
11 |
--------------------------------------------------------------------------------
/gulp/tasks/fonts.js:
--------------------------------------------------------------------------------
1 | import config from '../config';
2 | import changed from 'gulp-changed';
3 | import gulp from 'gulp';
4 | import browserSync from 'browser-sync';
5 |
6 | gulp.task('fonts', function() {
7 |
8 | return gulp.src(config.fonts.src)
9 | .pipe(changed(config.fonts.dest)) // Ignore unchanged files
10 | .pipe(gulp.dest(config.fonts.dest))
11 | .pipe(browserSync.stream());
12 |
13 | });
14 |
--------------------------------------------------------------------------------
/gulp/tasks/gzip.js:
--------------------------------------------------------------------------------
1 | import config from '../config';
2 | import gulp from 'gulp';
3 | import gzip from 'gulp-gzip';
4 |
5 | gulp.task('gzip', function() {
6 |
7 | return gulp.src(config.gzip.src)
8 | .pipe(gzip(config.gzip.options))
9 | .pipe(gulp.dest(config.gzip.dest));
10 |
11 | });
12 |
--------------------------------------------------------------------------------
/gulp/tasks/images.js:
--------------------------------------------------------------------------------
1 | import config from '../config';
2 | import changed from 'gulp-changed';
3 | import gulp from 'gulp';
4 | import gulpif from 'gulp-if';
5 | import imagemin from 'gulp-imagemin';
6 | import browserSync from 'browser-sync';
7 |
8 | gulp.task('images', function() {
9 |
10 | return gulp.src(config.images.src)
11 | .pipe(changed(config.images.dest)) // Ignore unchanged files
12 | .pipe(gulpif(global.isProd, imagemin())) // Optimize
13 | .pipe(gulp.dest(config.images.dest))
14 | .pipe(browserSync.stream());
15 |
16 | });
17 |
--------------------------------------------------------------------------------
/gulp/tasks/production.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import runSequence from 'run-sequence';
3 |
4 | gulp.task('prod', ['clean'], function(cb) {
5 |
6 | cb = cb || function() {};
7 |
8 | global.isProd = true;
9 |
10 | runSequence(['styles', 'images', 'fonts', 'views'], 'browserify', 'gzip', cb);
11 |
12 | });
13 |
--------------------------------------------------------------------------------
/gulp/tasks/protractor.js:
--------------------------------------------------------------------------------
1 | import config from '../config';
2 | import testServer from '../util/testServer';
3 | import gulp from 'gulp';
4 | import {
5 | protractor,
6 | webdriver_update, // eslint-disable-line camelcase
7 | webdriver
8 | } from 'gulp-protractor';
9 |
10 | gulp.task('webdriverUpdate', webdriver_update);
11 | gulp.task('webdriver', webdriver);
12 |
13 | gulp.task('protractor', ['prod', 'webdriverUpdate', 'webdriver'], function(cb) {
14 |
15 | const testFiles = gulp.src('test/e2e/**/*.js');
16 |
17 | testServer({
18 | port: config.testPort,
19 | dir: config.buildDir
20 | }).then((server) => {
21 | testFiles.pipe(protractor({
22 | configFile: config.test.protractor
23 | })).on('error', (err) => {
24 | // Make sure failed tests cause gulp to exit non-zero
25 | throw err;
26 | }).on('end', () => server.close(cb));
27 | });
28 |
29 | });
30 |
--------------------------------------------------------------------------------
/gulp/tasks/styles.js:
--------------------------------------------------------------------------------
1 | import config from '../config';
2 | import gulp from 'gulp';
3 | import gulpif from 'gulp-if';
4 | import sourcemaps from 'gulp-sourcemaps';
5 | import sass from 'gulp-sass';
6 | import sassGlob from 'gulp-sass-glob';
7 | import handleErrors from '../util/handleErrors';
8 | import browserSync from 'browser-sync';
9 | import autoprefixer from 'gulp-autoprefixer';
10 |
11 | gulp.task('styles', function () {
12 |
13 | const createSourcemap = !global.isProd || config.styles.prodSourcemap;
14 |
15 | return gulp.src(config.styles.src)
16 | .pipe(gulpif(createSourcemap, sourcemaps.init()))
17 | .pipe(sassGlob())
18 | .pipe(sass({
19 | sourceComments: !global.isProd,
20 | outputStyle: global.isProd ? 'compressed' : 'nested',
21 | includePaths: config.styles.sassIncludePaths
22 | }))
23 | .on('error', handleErrors)
24 | .pipe(autoprefixer({
25 | browsers: ['last 2 versions', '> 1%', 'ie 8']
26 | }))
27 | .pipe(gulpif(
28 | createSourcemap,
29 | sourcemaps.write( global.isProd ? './' : null ))
30 | )
31 | .pipe(gulp.dest(config.styles.dest))
32 | .pipe(browserSync.stream());
33 |
34 | });
35 |
--------------------------------------------------------------------------------
/gulp/tasks/test.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import runSequence from 'run-sequence';
3 |
4 | gulp.task('test', function() {
5 |
6 | return runSequence('unit', 'protractor');
7 |
8 | });
9 |
--------------------------------------------------------------------------------
/gulp/tasks/unit.js:
--------------------------------------------------------------------------------
1 | import config from '../config';
2 | import path from 'path';
3 | import gulp from 'gulp';
4 | import {Server} from 'karma';
5 |
6 | gulp.task('unit', ['views'], function(cb) {
7 |
8 | new Server({
9 | configFile: path.resolve(__dirname, '../..', config.test.karma),
10 | singleRun: true
11 | }, cb).start();
12 |
13 | });
14 |
--------------------------------------------------------------------------------
/gulp/tasks/views.js:
--------------------------------------------------------------------------------
1 | import config from '../config';
2 | import gulp from 'gulp';
3 | import merge from 'merge-stream';
4 | import templateCache from 'gulp-angular-templatecache';
5 |
6 | // Views task
7 | gulp.task('views', function() {
8 |
9 | // Put our index.html in the dist folder
10 | const indexFile = gulp.src(config.views.index)
11 | .pipe(gulp.dest(config.buildDir));
12 |
13 | // Process any other view files from app/views
14 | const views = gulp.src(config.views.src)
15 | .pipe(templateCache({
16 | standalone: true
17 | }))
18 | .pipe(gulp.dest(config.views.dest));
19 |
20 | return merge(indexFile, views);
21 |
22 | });
23 |
--------------------------------------------------------------------------------
/gulp/tasks/watch.js:
--------------------------------------------------------------------------------
1 | import config from '../config';
2 | import gulp from 'gulp';
3 |
4 | gulp.task('watch', ['browserSync'], function() {
5 |
6 | global.isWatching = true;
7 |
8 | // Scripts are automatically watched and rebundled by Watchify inside Browserify task
9 | gulp.watch(config.scripts.src, ['eslint']);
10 | gulp.watch(config.styles.src, ['styles']);
11 | gulp.watch(config.images.src, ['images']);
12 | gulp.watch(config.fonts.src, ['fonts']);
13 | gulp.watch(config.views.watch, ['views']);
14 |
15 | });
--------------------------------------------------------------------------------
/gulp/util/bundleLogger.js:
--------------------------------------------------------------------------------
1 | import gutil from 'gulp-util';
2 | import prettyHrtime from 'pretty-hrtime';
3 |
4 | let startTime;
5 |
6 | export default {
7 |
8 | start() {
9 | startTime = process.hrtime();
10 | gutil.log(`${gutil.colors.green('Rebundling')}...`);
11 | },
12 |
13 | end() {
14 | const taskTime = process.hrtime(startTime);
15 | const prettyTime = prettyHrtime(taskTime);
16 | gutil.log(`Finished ${gutil.colors.green('rebundling')} in ${gutil.colors.magenta(prettyTime)}`);
17 | }
18 |
19 | };
20 |
--------------------------------------------------------------------------------
/gulp/util/handleErrors.js:
--------------------------------------------------------------------------------
1 | import gutil from 'gulp-util';
2 | import notify from 'gulp-notify';
3 |
4 | export default function(error) {
5 |
6 | if( !global.isProd ) {
7 |
8 | const args = Array.prototype.slice.call(arguments);
9 |
10 | // Send error to notification center with gulp-notify
11 | notify.onError({
12 | title: 'Compile Error',
13 | message: '<%= error.message %>'
14 | }).apply(this, args);
15 |
16 | // Keep gulp from hanging on this task
17 | this.emit('end');
18 |
19 | } else {
20 | // Log the error and stop the process
21 | // to prevent broken code from building
22 | gutil.log(gutil.colors.red(error));
23 | process.exit(1);
24 | }
25 |
26 | };
27 |
--------------------------------------------------------------------------------
/gulp/util/scriptFilter.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 |
3 | // Filters out non .js files. Prevents
4 | // accidental inclusion of possible hidden files
5 | export default function(name) {
6 |
7 | return /(\.(js)$)/i.test(path.extname(name));
8 |
9 | };
--------------------------------------------------------------------------------
/gulp/util/testServer.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 |
3 | export default function testServer({port, dir}) {
4 |
5 | const app = express();
6 |
7 | app.use(express.static(dir));
8 |
9 | return new Promise((resolve) => {
10 | const server = app.listen(port, () => {
11 | resolve(server);
12 | });
13 | });
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | /*
2 | * gulpfile.js
3 | * ===========
4 | * Rather than manage one giant configuration file responsible
5 | * for creating multiple tasks, each task has been broken out into
6 | * its own file in gulp/tasks. Any file in that folder gets automatically
7 | * required by the loop in ./gulp/index.js (required below).
8 | *
9 | * To add a new task, simply add a new task file to gulp/tasks.
10 | */
11 |
12 | global.isProd = false;
13 |
14 | require('./gulp');
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angularjs-gulp-browserify-boilerplate",
3 | "version": "1.7.1",
4 | "author": "Jake Marsh 
6 | 
7 | 
8 |
9 |