Skip to content

Commit c800da6

Browse files
SwiipSwiip
committed
here comes browser sync
1 parent 0cd5723 commit c800da6

File tree

6 files changed

+114
-113
lines changed

6 files changed

+114
-113
lines changed

‎README.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ yo gulp-angular [app-name]
4040
### Use Gulp tasks
4141

4242
* `gulp` or `gulp build` to build an optimized version of your application in `/dist`
43-
* `gulp watch` to launch a server with livereload capacities on your source files
43+
* `gulp serve` to launch a browser sync server on your source files
4444
* `gulp serve:dist` to launch a server on your optimized application
4545
* `gulp wiredep` to fill bower dependencies in your `.html` file(s)
4646
* `gulp test` to launch your unit tests with Karma
@@ -66,8 +66,8 @@ But I think keeping first division by file type: scripts, styles, partials.
6666
* Unit test (karma)
6767
* e2e test (Protratctor)
6868
* ng html2js
69+
* browser sync
6970
* **TODO** lazy
70-
* **TODO** browser sync
7171

7272
## Questions the generator will asks
7373
* jQuery: jQuery, Zepto, none
@@ -83,6 +83,10 @@ But I think keeping first division by file type: scripts, styles, partials.
8383

8484
## Changelog
8585

86+
### 0.3.0
87+
88+
* Integration of Browser Sync as development server in place of a home made connect server
89+
8690
### 0.2.1
8791

8892
* Fix main.html missing with routing

‎app/templates/_package.json‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
"version": "0.0.0",
44
"dependencies": {},
55
"devDependencies": {
6-
"connect": "^2.14.4",
7-
"connect-livereload": "^0.4.0",
86
"gulp": "^3.6.0",
97
"gulp-autoprefixer": "^0.0.6",
108
"gulp-bower-files": "^0.2.1",
@@ -15,7 +13,6 @@
1513
"gulp-flatten": "^0.0.2",
1614
"gulp-imagemin": "^0.5.0",
1715
"gulp-jshint": "^1.5.3",
18-
"gulp-livereload": "^1.2.0",
1916
"gulp-load-plugins": "^0.5.0",
2017
"gulp-ruby-sass": "^0.4.3",
2118
"gulp-size": "^0.3.0",
@@ -28,14 +25,15 @@
2825
"gulp-minify-html": "~0.1.3",
2926
"gulp-inject": "~0.4.1",
3027
"jshint-stylish": "^0.1.5",
31-
"opn": "^0.1.1",
3228
"wiredep": "^1.4.3",
3329
"gulp-karma": "0.0.4",
3430
"karma-jasmine": "^0.1.5",
3531
"karma-phantomjs-launcher": "^0.1.4",
3632
"gulp-protractor": "0.0.7",
3733
"protractor": "~0.22.0",
38-
"require-dir": "~0.1.0"
34+
"require-dir": "~0.1.0",
35+
"browser-sync": "~0.9.1",
36+
"http-proxy": "~1.1.4"
3937
},
4038
"engines": {
4139
"node": ">=0.10.0"

‎app/templates/gulp/_build.js‎

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,83 +5,83 @@ var gulp = require('gulp');
55
var $ = require('gulp-load-plugins')();
66

77
gulp.task('styles', function () {
8-
return gulp.src('app/styles/main.scss')
9-
.pipe($.rubySass({ style: 'expanded' }))
10-
.pipe($.autoprefixer('last 1 version'))
11-
.pipe(gulp.dest('.tmp/styles'))
12-
.pipe($.size());
8+
return gulp.src('app/styles/main.scss')
9+
.pipe($.rubySass({ style: 'expanded' }))
10+
.pipe($.autoprefixer('last 1 version'))
11+
.pipe(gulp.dest('.tmp/styles'))
12+
.pipe($.size());
1313
});
1414

1515
gulp.task('scripts', function () {
16-
return gulp.src('app/scripts/**/*.js')
17-
.pipe($.jshint())
18-
.pipe($.jshint.reporter($.jshintStylish))
19-
.pipe($.size());
16+
return gulp.src('app/scripts/**/*.js')
17+
.pipe($.jshint())
18+
.pipe($.jshint.reporter($.jshintStylish))
19+
.pipe($.size());
2020
});
2121

2222
gulp.task('partials', function () {
2323
return gulp.src('app/partials/**/*.html')
24-
.pipe($.minifyHtml({
25-
empty: true,
26-
spare: true,
27-
quotes: true
28-
}))
29-
.pipe($.ngHtml2js({
30-
moduleName: "<%= appname %>",
31-
prefix: "partials/"
32-
}))
33-
.pipe(gulp.dest(".tmp/partials"))
34-
.pipe($.size());
24+
.pipe($.minifyHtml({
25+
empty: true,
26+
spare: true,
27+
quotes: true
28+
}))
29+
.pipe($.ngHtml2js({
30+
moduleName: "<%= appname %>",
31+
prefix: "partials/"
32+
}))
33+
.pipe(gulp.dest(".tmp/partials"))
34+
.pipe($.size());
3535
});
3636

3737
gulp.task('html', ['styles', 'scripts', 'partials'], function () {
38-
var jsFilter = $.filter('**/*.js');
39-
var cssFilter = $.filter('**/*.css');
38+
var jsFilter = $.filter('**/*.js');
39+
var cssFilter = $.filter('**/*.css');
4040

41-
return gulp.src('app/*.html')
42-
.pipe($.inject(gulp.src('.tmp/partials/**/*.js'), {
43-
read: false,
44-
starttag: '<!-- inject:partials -->',
45-
addRootSlash: false,
46-
ignorePath: '.tmp'
47-
}))
48-
.pipe($.useref.assets())
49-
.pipe($.rev())
50-
.pipe(jsFilter)
51-
.pipe($.ngmin())
52-
.pipe($.uglify())
53-
.pipe(jsFilter.restore())
54-
.pipe(cssFilter)
55-
.pipe($.csso())
56-
.pipe(cssFilter.restore())
57-
.pipe($.useref.restore())
58-
.pipe($.useref())
59-
.pipe($.revReplace())
60-
.pipe(gulp.dest('dist'))
61-
.pipe($.size());
41+
return gulp.src('app/*.html')
42+
.pipe($.inject(gulp.src('.tmp/partials/**/*.js'), {
43+
read: false,
44+
starttag: '<!-- inject:partials -->',
45+
addRootSlash: false,
46+
ignorePath: '.tmp'
47+
}))
48+
.pipe($.useref.assets())
49+
.pipe($.rev())
50+
.pipe(jsFilter)
51+
.pipe($.ngmin())
52+
.pipe($.uglify())
53+
.pipe(jsFilter.restore())
54+
.pipe(cssFilter)
55+
.pipe($.csso())
56+
.pipe(cssFilter.restore())
57+
.pipe($.useref.restore())
58+
.pipe($.useref())
59+
.pipe($.revReplace())
60+
.pipe(gulp.dest('dist'))
61+
.pipe($.size());
6262
});
6363

6464
gulp.task('images', function () {
65-
return gulp.src('app/images/**/*')
66-
.pipe($.cache($.imagemin({
67-
optimizationLevel: 3,
68-
progressive: true,
69-
interlaced: true
70-
})))
71-
.pipe(gulp.dest('dist/images'))
72-
.pipe($.size());
65+
return gulp.src('app/images/**/*')
66+
.pipe($.cache($.imagemin({
67+
optimizationLevel: 3,
68+
progressive: true,
69+
interlaced: true
70+
})))
71+
.pipe(gulp.dest('dist/images'))
72+
.pipe($.size());
7373
});
7474

7575
gulp.task('fonts', function () {
76-
return $.bowerFiles()
77-
.pipe($.filter('**/*.{eot,svg,ttf,woff}'))
78-
.pipe($.flatten())
79-
.pipe(gulp.dest('dist/fonts'))
80-
.pipe($.size());
76+
return $.bowerFiles()
77+
.pipe($.filter('**/*.{eot,svg,ttf,woff}'))
78+
.pipe($.flatten())
79+
.pipe(gulp.dest('dist/fonts'))
80+
.pipe($.size());
8181
});
8282

8383
gulp.task('clean', function () {
84-
return gulp.src(['.tmp', 'dist'], { read: false }).pipe($.clean());
84+
return gulp.src(['.tmp', 'dist'], { read: false }).pipe($.clean());
8585
});
8686

8787
gulp.task('build', ['html', 'partials', 'images', 'fonts']);

‎app/templates/gulp/server.js‎

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,48 @@ var gulp = require('gulp');
44

55
var $ = require('gulp-load-plugins')();
66

7-
gulp.task('connect:src', function () {
8-
var connect = require('connect');
9-
var app = connect()
10-
.use(require('connect-livereload')({ port: 35729 }))
11-
.use(connect.static('app'))
12-
.use(connect.static('.tmp'))
13-
.use(connect.directory('app'));
14-
15-
gulp.server = require('http').createServer(app)
16-
.listen(9000)
17-
.on('listening', function () {
18-
console.log('Started connect web server on http://localhost:9000');
19-
});
20-
});
7+
var browserSync = require('browser-sync');
8+
var httpProxy = require('http-proxy');
219

22-
gulp.task('connect:dist', function () {
23-
var connect = require('connect');
24-
var app = connect()
25-
.use(connect.static('dist'));
10+
/* This configuration allow you to configure browser sync to proxy your backend */
11+
var proxyTarget = 'http://server/context/'; // The location of your backend
12+
var proxyApiPrefix = 'api'; // The element in the URL which differentiate between API request and static file request
2613

27-
gulp.server = require('http').createServer(app)
28-
.listen(9000)
29-
.on('listening', function () {
30-
console.log('Started connect web server for dist files on http://localhost:9000');
31-
});
14+
var proxy = httpProxy.createProxyServer({
15+
target: proxyTarget
3216
});
3317

34-
gulp.task('serve', ['connect:src', 'styles'], function () {
35-
require('opn')('http://localhost:9000');
18+
function proxyMiddleware(req, res, next) {
19+
if (req.url.indexOf(proxyApiPrefix) != -1) {
20+
proxy.web(req, res);
21+
} else {
22+
next();
23+
}
24+
};
25+
26+
function browserSyncInit(baseDir, files) {
27+
browserSync.init(files, {
28+
startPath: "/index.html",
29+
server: {
30+
baseDir: baseDir,
31+
middleware: proxyMiddleware
32+
}
33+
});
34+
}
35+
36+
gulp.task('serve', ['watch'], function() {
37+
browserSyncInit([
38+
'app',
39+
'.tmp'
40+
], [
41+
'app/*.html',
42+
'.tmp/styles/**/*.css',
43+
'app/scripts/**/*.js',
44+
'app/partials/**/*.html',
45+
'app/images/**/*'
46+
]);
3647
});
3748

38-
gulp.task('serve:dist', ['connect:dist'], function () {
39-
require('opn')('http://localhost:9000');
49+
gulp.task('serve:dist', ['build'], function() {
50+
browserSyncInit('dist');
4051
});

‎app/templates/gulp/watch.js‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,13 @@
22

33
var gulp = require('gulp');
44

5-
var $ = require('gulp-load-plugins')();
6-
7-
gulp.task('watch', ['serve'], function () {
8-
var server = $.livereload();
5+
var browserSync = require('browser-sync');
96

10-
// watch for changes
11-
12-
gulp.watch([
13-
'app/*.html',
14-
'.tmp/styles/**/*.css',
15-
'app/scripts/**/*.js',
16-
'app/images/**/*'
17-
]).on('change', function (file) {
18-
server.changed(file.path);
19-
});
7+
var $ = require('gulp-load-plugins')();
208

21-
gulp.watch('app/styles/**/*.scss', ['styles']);
22-
gulp.watch('app/scripts/**/*.js', ['scripts']);
23-
gulp.watch('app/images/**/*', ['images']);
24-
gulp.watch('bower.json', ['wiredep']);
9+
gulp.task('watch', ['wiredep', 'styles'] ,function () {
10+
gulp.watch('app/styles/**/*.scss', ['styles']);
11+
gulp.watch('app/scripts/**/*.js', ['scripts']);
12+
gulp.watch('app/images/**/*', ['images']);
13+
gulp.watch('bower.json', ['wiredep']);
2514
});

‎test/deps/package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
"version": "0.0.0",
44
"dependencies": {},
55
"devDependencies": {
6-
"connect": "^2.14.4",
7-
"connect-livereload": "^0.4.0",
86
"gulp": "^3.6.0",
97
"gulp-autoprefixer": "^0.0.6",
108
"gulp-bower-files": "^0.2.1",
@@ -25,7 +23,6 @@
2523
"gulp-rev": "^0.3.2",
2624
"gulp-rev-replace": "^0.1.0",
2725
"jshint-stylish": "^0.1.5",
28-
"opn": "^0.1.1",
2926
"wiredep": "^1.4.3",
3027
"gulp-karma": "^0.0.4",
3128
"karma-jasmine": "^0.1.5",
@@ -35,7 +32,9 @@
3532
"require-dir": "~0.1.0",
3633
"gulp-ng-html2js": "~0.1.6",
3734
"gulp-minify-html": "~0.1.3",
38-
"gulp-inject": "~0.4.1"
35+
"gulp-inject": "~0.4.1",
36+
"browser-sync": "~0.9.1",
37+
"http-proxy": "~1.1.4"
3938
},
4039
"engines": {
4140
"node": ">=0.10.0"

0 commit comments

Comments
 (0)