Skip to content

Commit 73c57a8

Browse files
committed
recipes to:
* gzip dist files * inline angularjs templates
1 parent 22e1ac9 commit 73c57a8

2 files changed

Lines changed: 85 additions & 0 deletions

File tree

docs/recipes/adding-gzip-task.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# GZip dist gulp task
2+
3+
1. Install [gulp-gzip](https://www.npmjs.org/package/gulp-gzip) package <br>
4+
`npm install gulp-gzip --save-dev`
5+
6+
2. Add this code to your Gulpfile:
7+
8+
```javascript
9+
var gzip = require('gulp-gzip');
10+
11+
gulp.task('gzip', ['index'], function(cb) {
12+
gulp.src('./dist/**')
13+
.pipe(gzip({
14+
append: true,
15+
level: 9
16+
}))
17+
.pipe(gulp.dest('dist'))
18+
.on('end', cb);
19+
});
20+
```
21+
22+
3. Run the new task compilation <br>
23+
`gulp gzip`
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Add AngularJS templates to cache and inline it on page
2+
3+
This recipe assumes that your templates are in `src/templates`. It does a two steps substitution in order to achieve its goal, because it needs the Javascript and HTML to be minified with existing configurations, and then it inlines the generate template cache code. It also assumes that you have a module called `MY_MODULE_NAME`.
4+
5+
6+
1. Install packages [gulp-substituter](https://www.npmjs.org/package/gulp-substituter) and [gulp-angular-templatecache](https://www.npmjs.org/package/gulp-angular-templatecache) package <br>
7+
```
8+
npm install gulp-substituter --save-dev
9+
npm install gulp-angular-templatecache --save-dev
10+
```
11+
12+
2. Add this code to your Gulpfile:
13+
14+
```javascript
15+
var fs = require('fs');
16+
var substituter = require('gulp-substituter');
17+
var templateCache = require('gulp-angular-templatecache');
18+
19+
gulp.task('gzip', function(cb) {
20+
gulp.src('./dist/**')
21+
.pipe(gzip({
22+
append: true,
23+
level: 9
24+
}))
25+
.pipe(gulp.dest('dist'))
26+
.on('end', cb);
27+
});
28+
29+
gulp.task('templates', ['index'], function(cb) {
30+
gulp.src('./dist/templates/**/*.html')
31+
.pipe(templateCache('templates.js', {
32+
root: '/templates',
33+
module: 'MY_MODULE_NAME'
34+
}))
35+
.pipe(gulp.dest('dist/scripts'))
36+
.on('end', function() {
37+
gulp.src('./dist/index.html')
38+
.pipe(substituter({
39+
templates: function() {
40+
var templates = fs.readFileSync('dist/scripts/templates.js').toString()
41+
.replace(/<\/script>/g, '</scr" + "ipt>')
42+
.replace(/\n/g, '');
43+
return '<script type="text/javascript">' + templates + '</script>';
44+
},
45+
__start: '<',
46+
__end: '/>',
47+
__prefix: 'replace'
48+
}))
49+
.pipe(gulp.dest('dist'))
50+
.on('end', cb);
51+
});
52+
});
53+
```
54+
55+
3. Add the following to your Pho configuration <br>
56+
`defaultDependencies: ['templates']`
57+
58+
4. Add the following to your page, after loading AngularJS and your controllers <br>
59+
`<!-- substitute:templates -->`
60+
61+
5. Run the task compilation <br>
62+
`gulp templates`

0 commit comments

Comments
 (0)