Skip to content
This repository was archived by the owner on Nov 4, 2021. It is now read-only.

Commit 05ec0a5

Browse files
tlancinatlancina
committed
initial commit
0 parents  commit 05ec0a5

16 files changed

+486
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Ionic Gulp tasks
2+
3+
A curated collection of [Gulp](http://gulpjs.com/) tasks for building Ionic apps. Using these tasks allows you to stay up to date if the default Ionic 2 build changes while it is in Beta.
4+
5+
## Tasks
6+
7+
Tasks are configured to work by default with the Ionic starters generated by the [Ionic CLI](github.com/driftyco/ionic-cli).
8+
9+
The current list of tasks is:
10+
11+
12+
#### Usage
13+
14+
To use a task in your Ionic project's Gulpfile, `require` it, then register it:
15+
16+
```
17+
var gulp = require('gulp'),
18+
buildWebpack = require('ionic-gulp-webpack-build');
19+
20+
gulp.task('build', buildWebpack);
21+
```
22+
23+
#### API
24+
25+
Each task takes an optional options object:
26+
```
27+
gulp.task('watch', function(){
28+
return webpackBuild({ watch: true });
29+
});
30+
```
31+
32+
The options depend on each task. For more information on a particular task, take a look at its README.
33+
34+
#### Return value
35+
36+
Each task returns either a stream or promise.

‎fonts-copy/README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Fonts Copy Task
2+
Copy Ionic fonts to build directory.
3+
4+
## API
5+
6+
### copyFonts([options])
7+
8+
Returns a [stream](http://nodejs.org/api/stream.html) of [Vinyl files](https://github.com/wearefractal/vinyl-fs)
9+
that can be [piped](http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options).
10+
11+
#### Available options:
12+
- **src** (String|Array) Glob or array of globs ([What's a glob?](https://github.com/isaacs/node-glob#glob-primer)) matching font source files. Default: `'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)'`.
13+
- **dest** (String) Output path for the fonts. Default: `'www/build/fonts'`.
14+
15+
## Example
16+
17+
```
18+
var copyFonts = require('ionic-gulp-fonts-copy');
19+
20+
gulp.task('fonts', copyFonts);
21+
22+
gulp.task('fonts', function(){
23+
return copyFonts({ dest: 'www/my-custom-build-dir'});
24+
});
25+
```
26+
27+
28+
29+
30+
31+

‎fonts-copy/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
var gulp = require('gulp');
2+
3+
module.exports = function(options) {
4+
options.src = options.src || 'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)';
5+
options.dest = options.dest || 'www/build/fonts';
6+
7+
return gulp.src(options.src)
8+
.pipe(gulp.dest(options.dest));
9+
}

‎fonts-copy/package.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "ionic-gulp-fonts-copy",
3+
"description": "Gulp task for Ionic projects to copy Ionic fonts to a build directory",
4+
"version": "1.0.0",
5+
"dependencies": {
6+
"gulp": "^3.9.1"
7+
}
8+
}

‎html-copy/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# HTML Copy Task
2+
Copy HTML sources to build directory.
3+
4+
## API
5+
6+
### copyHTML([options])
7+
8+
Returns a [stream](http://nodejs.org/api/stream.html) of [Vinyl files](https://github.com/wearefractal/vinyl-fs)
9+
that can be [piped](http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options).
10+
11+
#### Available options:
12+
- **src** (String|Array) Glob or array of globs ([What's a glob?](https://github.com/isaacs/node-glob#glob-primer)) matching HTML source files. Default: `'app/**/*.html'`.
13+
- **dest** (String) Output path for the HTML files. Default: `'www/build'`.
14+
15+
## Example
16+
17+
```
18+
var copyHTML = require('ionic-gulp-html-copy');
19+
20+
gulp.task('html', copyHTML);
21+
22+
gulp.task('html', function(){
23+
return copyHTML({ dest: 'www/my-custom-build-dir'});
24+
});
25+
```
26+
27+
28+
29+
30+

‎html-copy/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
var gulp = require('gulp');
2+
3+
module.exports = function(options) {
4+
options.src = options.src || 'app/**/*.html';
5+
options.dest = options.dest || 'www/build';
6+
7+
return gulp.src(options.src)
8+
.pipe(gulp.dest(options.dest));
9+
}

‎html-copy/package.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "ionic-gulp-html-copy",
3+
"description": "Gulp task for Ionic projects to copy HTML sources to a build directory",
4+
"version": "1.0.0",
5+
"dependencies": {
6+
"gulp": "^3.9.1"
7+
}
8+
}

‎index.js

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
2+
var colors = require('colors');
3+
4+
module.exports = IonicGulp;
5+
6+
function IonicGulp(gulp, config) {
7+
this.gulp = gulp;
8+
this.ionicDir = "node_modules/ionic-angular/";
9+
10+
gulp.task('watch', ['sass', 'copy.fonts', 'copy.html'], function(done){
11+
var gulpWatch = require('gulp-watch');
12+
13+
gulpWatch('www/app/**/*.scss', function(){
14+
this.gulp.start('sass');
15+
});
16+
gulpWatch('www/app/**/*.html', function(){
17+
this.gulp.start('copy.html');
18+
});
19+
20+
this.buildWebpack({ watch: true }, done);
21+
}.bind(this));
22+
23+
gulp.task('build', ['sass', 'copy.fonts', 'copy.html'], function(done) {
24+
this.build(opts, done);
25+
}.bind(this));
26+
27+
gulp.task('sass', this.buildSass.bind(this));
28+
29+
gulp.task('copy.fonts', function(){
30+
return this.copy({
31+
src: this.ionicDir + 'fonts/fonts/**/*.+(ttf|woff|woff2)',
32+
dest: 'www/build/fonts'
33+
});
34+
}.bind(this));
35+
36+
gulp.task('copy.html', function(){
37+
return this.copy({
38+
src: 'app/**/*.html',
39+
dest: 'www/build'
40+
});
41+
}.bind(this));
42+
43+
gulp.task('clean', function(done) {
44+
var del = require('del');
45+
del(['www/build'], done);
46+
});
47+
}
48+
49+
IonicGulp.prototype.buildWebpack = function(opts, done) {
50+
// webpack is huge, so rather than forcing people who may be using browserify
51+
// to install it, it's a peerDependency
52+
try {
53+
var webpack = require('webpack');
54+
} catch(e) {
55+
console.log((
56+
'Uh oh, looks like you\'re trying to build with webpack, but ' +
57+
'wepback isn\'t installed! Try running:\n'
58+
).yellow);
59+
console.log(' npm install --save-dev webpack\n'.blue);
60+
return done();
61+
}
62+
63+
// prevent gulp calling done callback more than once when watching
64+
var firstTime = true;
65+
var config = opts.config || require(process.cwd() + '/webpack.config.js');
66+
67+
// https://github.com/webpack/docs/wiki/node.js-api#statstojsonoptions
68+
var defaultStatsOptions = {
69+
'colors': true,
70+
'modules': false,
71+
'chunks': false,
72+
'exclude': ['node_modules']
73+
}
74+
var statsOptions = opts.statsOptions || defaultStatsOptions;
75+
76+
var compiler = webpack(config);
77+
if (opts.watch) {
78+
compiler.watch(null, compileHandler);
79+
} else {
80+
compiler.run(compileHandler);
81+
}
82+
83+
function compileHandler(err, stats){
84+
if (firstTime) {
85+
firstTime = false;
86+
done();
87+
}
88+
89+
// print build stats and errors
90+
console.log(stats.toString(statsOptions));
91+
}
92+
}
93+
94+
IonicGulp.prototype.buildSass = function(opts) {
95+
var sass = require('gulp-sass');
96+
var autoprefixer = require('gulp-autoprefixer');
97+
98+
var autoprefixerOpts = {
99+
browsers: [
100+
'last 2 versions',
101+
'iOS >= 7',
102+
'Android >= 4',
103+
'Explorer >= 10',
104+
'ExplorerMobile >= 11'
105+
],
106+
cascade: false
107+
};
108+
109+
return this.gulp.src('app/theme/app.+(ios|md).scss')
110+
.pipe(sass({
111+
includePaths: [
112+
this.ionicDir,
113+
'node_modules/ionicons/dist/scss'
114+
]
115+
}))
116+
.on('error', function(err){
117+
console.error(err.message);
118+
this.emit('end');
119+
})
120+
.pipe(autoprefixer(autoprefixerOpts))
121+
.pipe(this.gulp.dest('www/build/css'))
122+
}
123+
124+
IonicGulp.prototype.copy = function(opts) {
125+
return this.gulp.src(opts.src)
126+
.pipe(this.gulp.dest(opts.dest));
127+
}
128+
129+

‎package.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "ionic-gulp-tasks",
3+
"version": "1.0.0",
4+
"dependencies": {
5+
"colors": "^1.1.2",
6+
"gulp-autoprefixer": "^3.1.0",
7+
"gulp-sass": "^2.2.0",
8+
"gulp-watch": "^4.3.5"
9+
},
10+
"peerDependencies": {
11+
"webpack": "^1.12.14"
12+
}
13+
}

‎sass-build/README.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Sass Build Task
2+
Compile your Sass sources into a CSS bundle.
3+
4+
## API
5+
6+
### sassBuild([options])
7+
8+
Returns a [stream](http://nodejs.org/api/stream.html) of [Vinyl files](https://github.com/wearefractal/vinyl-fs)
9+
that can be [piped](http://nodejs.org/api/stream.html#stream_readable_pipe_destination_options).
10+
11+
#### Available options:
12+
- **src** (String|Array) Glob or array of globs ([What's a glob?](https://github.com/isaacs/node-glob#glob-primer)) matching Sass entry files. Default: `'app/theme/app.+(ios|md|wp).scss'`.
13+
- **dest** (String) Output path for the compiled CSS bundle(s). Default: `'www/build/css'`.
14+
- **sassOptions** (Object) [Sass options](https://github.com/sass/node-sass#options). Default:
15+
```
16+
{
17+
includePaths: [
18+
'node_modules/ionic-angular',
19+
'node_modules/ionicons/dist/scss'
20+
]
21+
}
22+
```
23+
- **autoprefixerOptions** (Object) [Autoprefixer options](https://github.com/postcss/autoprefixer#options). Default:
24+
```
25+
{
26+
browsers: [
27+
'last 2 versions',
28+
'iOS >= 7',
29+
'Android >= 4',
30+
'Explorer >= 10',
31+
'ExplorerMobile >= 11'
32+
],
33+
cascade: false
34+
}
35+
```
36+
- **onError** (Function) Error handler when there are errors in the Sass stream. Default:
37+
```
38+
function(err) {
39+
console.error(err.message);
40+
this.emit('end');
41+
}
42+
```
43+
44+
## Example
45+
46+
```
47+
var sassBuild = require('ionic-gulp-sass-build');
48+
49+
gulp.task('sass', sassBuild);
50+
51+
gulp.task('sass', function(){
52+
return sassBuild({
53+
dest: 'www/my-custom-build-dir',
54+
sassOptions: {
55+
includePaths: [
56+
'node_modules/ionic-angular',
57+
'node_modules/ionicons/dist/scss',
58+
'node_modules/bootstrap-sass'
59+
]
60+
}
61+
});
62+
});
63+
```
64+
65+
66+
67+
68+

‎sass-build/index.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
var gulp = require('gulp'),
2+
sass = require('gulp-sass'),
3+
autoprefixer = require('gulp-autoprefixer')
4+
assign = require('lodash.assign');
5+
6+
var defaultOptions = {
7+
src: 'app/theme/app.+(ios|md|wp).scss',
8+
dest: 'www/build/css',
9+
sassOptions: {
10+
includePaths: [
11+
'node_modules/ionic-angular',
12+
'node_modules/ionicons/dist/scss'
13+
]
14+
},
15+
autoprefixerOptions:{
16+
browsers: [
17+
'last 2 versions',
18+
'iOS >= 7',
19+
'Android >= 4',
20+
'Explorer >= 10',
21+
'ExplorerMobile >= 11'
22+
],
23+
cascade: false
24+
},
25+
onError: function(err) {
26+
console.error(err.message);
27+
this.emit('end'); // Don't kill watch tasks - https://github.com/gulpjs/gulp/issues/259
28+
}
29+
}
30+
31+
module.exports = function(options) {
32+
options = assign(defaultOptions, options);
33+
34+
return gulp.src(options.src)
35+
.pipe(sass(options.sassOptions))
36+
.on('error', options.onError)
37+
.pipe(autoprefixer(options.autoprefixerOptions))
38+
.pipe(gulp.dest(options.dest));
39+
}

0 commit comments

Comments
 (0)