├── .gitignore
├── .jshintrc
├── Gulpfile.js
├── README.md
├── app
├── images
│ └── empty
├── index.html
├── scripts
│ ├── controllers
│ │ └── WelcomeCtrl.js
│ ├── directives
│ │ └── empty
│ ├── main.js
│ └── services
│ │ └── empty
├── styles
│ └── main.scss
└── views
│ └── empty
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/*
3 | dist/*
4 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "node": true,
3 | "browser": true,
4 | "esnext": true,
5 | "bitwise": true,
6 | "camelcase": true,
7 | "curly": true,
8 | "eqeqeq": true,
9 | "immed": true,
10 | "indent": 2,
11 | "latedef": true,
12 | "newcap": true,
13 | "noarg": true,
14 | "quotmark": "single",
15 | "regexp": true,
16 | "undef": true,
17 | "unused": true,
18 | "strict": true,
19 | "trailing": true,
20 | "smarttabs": true
21 | }
22 |
--------------------------------------------------------------------------------
/Gulpfile.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var gulp = require('gulp'),
4 | jshint = require('gulp-jshint'),
5 | browserify = require('gulp-browserify'),
6 | concat = require('gulp-concat'),
7 | rimraf = require('gulp-rimraf'),
8 | sass = require('gulp-sass'),
9 | autoprefixer = require('gulp-autoprefixer');
10 |
11 | // Modules for webserver and livereload
12 | var express = require('express'),
13 | refresh = require('gulp-livereload'),
14 | livereload = require('connect-livereload'),
15 | livereloadport = 35729,
16 | serverport = 5000;
17 |
18 | // Set up an express server (not starting it yet)
19 | var server = express();
20 | // Add live reload
21 | server.use(livereload({port: livereloadport}));
22 | // Use our 'dist' folder as rootfolder
23 | server.use(express.static('./dist'));
24 | // Because I like HTML5 pushstate .. this redirects everything back to our index.html
25 | server.all('/*', function(req, res) {
26 | res.sendfile('index.html', { root: 'dist' });
27 | });
28 |
29 | // Dev task
30 | gulp.task('dev', ['clean', 'views', 'styles', 'lint', 'browserify'], function() { });
31 |
32 | // Clean task
33 | gulp.task('clean', function() {
34 | gulp.src('./dist/views', { read: false }) // much faster
35 | .pipe(rimraf({force: true}));
36 | });
37 |
38 | // JSHint task
39 | gulp.task('lint', function() {
40 | gulp.src('app/scripts/*.js')
41 | .pipe(jshint())
42 | .pipe(jshint.reporter('default'));
43 | });
44 |
45 | // Styles task
46 | gulp.task('styles', function() {
47 | gulp.src('app/styles/*.scss')
48 | // The onerror handler prevents Gulp from crashing when you make a mistake in your SASS
49 | .pipe(sass({onError: function(e) { console.log(e); } }))
50 | // Optionally add autoprefixer
51 | .pipe(autoprefixer('last 2 versions', '> 1%', 'ie 8'))
52 | // These last two should look familiar now :)
53 | .pipe(gulp.dest('dist/css/'));
54 | });
55 |
56 | // Browserify task
57 | gulp.task('browserify', function() {
58 | // Single point of entry (make sure not to src ALL your files, browserify will figure it out)
59 | gulp.src(['app/scripts/main.js'])
60 | .pipe(browserify({
61 | insertGlobals: true,
62 | debug: false
63 | }))
64 | // Bundle to a single file
65 | .pipe(concat('bundle.js'))
66 | // Output it to our dist folder
67 | .pipe(gulp.dest('dist/js'));
68 | });
69 |
70 | // Views task
71 | gulp.task('views', function() {
72 | // Get our index.html
73 | gulp.src('app/index.html')
74 | // And put it in the dist folder
75 | .pipe(gulp.dest('dist/'));
76 |
77 | // Any other view files from app/views
78 | gulp.src('app/views/**/*')
79 | // Will be put in the dist/views folder
80 | .pipe(gulp.dest('dist/views/'));
81 | });
82 |
83 | gulp.task('watch', ['lint'], function() {
84 | // Start webserver
85 | server.listen(serverport);
86 | // Start live reload
87 | refresh.listen(livereloadport);
88 |
89 | // Watch our scripts, and when they change run lint and browserify
90 | gulp.watch(['app/scripts/*.js', 'app/scripts/**/*.js'],[
91 | 'lint',
92 | 'browserify'
93 | ]);
94 | // Watch our sass files
95 | gulp.watch(['app/styles/**/*.scss'], [
96 | 'styles'
97 | ]);
98 |
99 | gulp.watch(['app/**/*.html'], [
100 | 'views'
101 | ]);
102 |
103 | gulp.watch('./dist/**').on('change', refresh.changed);
104 |
105 | });
106 |
107 | gulp.task('default', ['dev', 'watch']);
108 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Example Boilerplate
2 |
3 | This is an example Boilerplate for using Angular, Gulp, Browserify and a local webserver with LiveReload.
4 |
5 | It's part of the blog post at http://mindthecode.com/lets-build-an-angularjs-app-with-browserify-and-gulp
6 |
7 | # Attention - Frickle
8 |
9 | I won't be actively maintaining this repository, to keep it compatible with the tutorial on Mindthecode, so if you want a more up to date and advanced boilerplate with the above +more you are better off cloning https://github.com/Hyra/Frickle/
10 |
11 | ## Installation
12 |
13 | git clone https://github.com/Hyra/angular-gulp-browserify-livereload-boilerplate/ example-app
14 |
15 | cd example-app
16 |
17 | npm install
18 |
19 | gulp dev
20 |
21 |
22 |
--------------------------------------------------------------------------------
/app/images/empty:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hyra/angular-gulp-browserify-livereload-boilerplate/7779d840b4d393c21d977fd4496353cdbc2de5a9/app/images/empty
--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | My awesome app
5 |
6 |
7 |
8 |
9 | My awesome app
10 |
11 | {{testVar}}
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/app/scripts/controllers/WelcomeCtrl.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var WelcomeCtrl = function($scope) {
4 | $scope.testVar = 'We are up and running from a required module!';
5 | };
6 |
7 | module.exports = WelcomeCtrl;
8 |
--------------------------------------------------------------------------------
/app/scripts/directives/empty:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hyra/angular-gulp-browserify-livereload-boilerplate/7779d840b4d393c21d977fd4496353cdbc2de5a9/app/scripts/directives/empty
--------------------------------------------------------------------------------
/app/scripts/main.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var angular = require('angular'); // That's right! We can just require angular as if we were in node
4 |
5 | var WelcomeCtrl = require('./controllers/WelcomeCtrl'); // We can use our WelcomeCtrl.js as a module. Rainbows.
6 |
7 | var app = angular.module('myApp', []);
8 |
9 | app.controller('WelcomeCtrl', ['$scope', WelcomeCtrl]);
10 |
--------------------------------------------------------------------------------
/app/scripts/services/empty:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hyra/angular-gulp-browserify-livereload-boilerplate/7779d840b4d393c21d977fd4496353cdbc2de5a9/app/scripts/services/empty
--------------------------------------------------------------------------------
/app/styles/main.scss:
--------------------------------------------------------------------------------
1 | body {
2 | background: #D3D3D3;
3 | color: #434343;
4 | h1 {
5 | color: #333333;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/app/views/empty:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hyra/angular-gulp-browserify-livereload-boilerplate/7779d840b4d393c21d977fd4496353cdbc2de5a9/app/views/empty
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-gulp-browserify-livereload-boilerplate",
3 | "version": "0.0.1",
4 | "devDependencies": {
5 | "connect-livereload": "~0.4.0",
6 | "gulp-concat": "~2.2.0",
7 | "gulp-embedlr": "~0.5.2",
8 | "gulp-util": "~2.2.14",
9 | "express": "~4.1.1",
10 | "tiny-lr": "0.0.7",
11 | "gulp-browserify": "~0.5.0",
12 | "gulp-livereload": "~2.1.0",
13 | "gulp": "~3.6.2",
14 | "gulp-jshint": "~1.5.5",
15 | "browserify": "~3.46.0",
16 | "gulp-sass": "~0.7.1",
17 | "gulp-autoprefixer": "0.0.7",
18 | "angular": "~1.2.16",
19 | "gulp-clean": "~0.3.1",
20 | "gulp-rimraf": "~0.1.0"
21 | },
22 | "engines": {
23 | "node": ">=0.10.0"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------