diff --git a/README.md b/README.md index aee3b67989..7505c27ad2 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,11 @@ - Run `gulp karma-watch` while gulp watch is running to watch tests. Unit tests run on compiled files in dist. - All test files must be suffixed with `_spec.js`. -#### Examples +#### Building & Running - `npm install -g jspm` -- `jspm install` -- `gulp examples` +- `jspm init && jspm install` +- `gulp watch` - `python -m SimpleHTTPServer .` - `open http://localhost:9000/dist/examples/aside/basic/index.html` - Follow the structure found in src/components/aside/examples/basic diff --git a/gulpfile.js b/gulpfile.js index c3473cf6cc..c415bc9185 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -2,7 +2,8 @@ // Mostly stolen from https://github.com/pkozlowski-opensource/ng2-play ///// -var Builder = require('systemjs-builder'); +var SystemJsBuilder = require('systemjs-builder'); +var exec = require('child_process').exec; var gulp = require('gulp'); var karma = require('karma').server; var path = require('path'); @@ -12,7 +13,6 @@ var through2 = require('through2'); var concat = require('gulp-concat'); var debug = require('gulp-debug'); var del = require('del'); -var exec = require('gulp-exec'); var gulpif = require('gulp-if'); var karma = require('karma').server; var plumber = require('gulp-plumber'); @@ -23,36 +23,11 @@ var traceur = require('gulp-traceur'); var wrap = require('gulp-wrap'); var argv = require('yargs').argv; -gulp.task('default', ['js', 'html', 'sass', 'libs', 'playgroundJs', 'playgroundFiles']); - -var NG2_PATH = 'jspm_packages/github/angular/angular@master'; -gulp.task('ng2-compile', shell.task([ - 'npm install', - 'gulp build/transpile.js.dev.es6' -], { - cwd: NG2_PATH -})); -gulp.task('ng2-copy', ['ng2-compile'], function() { - return gulp.src(NG2_PATH + '/dist/js/dev/es6/{angular2,rtts_assert}/**/*') - .pipe(gulpif(/es6$/, rename({ extname: '.js' }))) - .pipe(gulp.dest('dist/lib')); -}); +gulp.task('default', ['sass', 'examples', 'ng2']); gulp.task('watch', ['default'], function() { - var http = require('http'); - var connect = require('connect'); - var serveStatic = require('serve-static'); - var port = 9000; - - gulp.watch(buildConfig.src.html, ['html']); - gulp.watch(buildConfig.src.js, ['js']); gulp.watch(buildConfig.src.scss, ['sass']); - gulp.watch(buildConfig.src.playgroundJs, ['playgroundJs']); - gulp.watch(buildConfig.src.playgroundFiles, ['playgroundFiles']); - - var app = connect().use(serveStatic(__dirname + '/' + buildConfig.dist)); // serve everything that is static - http.createServer(app).listen(port); - console.log('Serving `dist` on http://localhost:' + port); + return gulp.watch(buildConfig.src.examples.concat('scripts/examples/index.template.html'), ['examples']); }); gulp.task('karma', function() { @@ -77,92 +52,54 @@ gulp.task('clean', function(done) { del([buildConfig.dist], done); }); -gulp.task('playgroundFiles', function() { - return gulp.src(buildConfig.src.playgroundFiles) - .pipe(gulp.dest(buildConfig.dist)); -}); - -gulp.task('playgroundJs', function() { - return gulp.src(buildConfig.src.playgroundJs) - .pipe(rename({extname: ''})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 - .pipe(plumber()) - .pipe(traceur({ - modules: 'instantiate', - moduleName: true, - annotations: true, - types: true - })) - .pipe(rename({extname: '.js'})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 - .pipe(gulp.dest(buildConfig.dist)); -}); - -gulp.task('js', function () { - return gulp.src(buildConfig.src.js) - .pipe(rename(function(file) { - // Forces the files to register themselves with 'ionic' prefix - file.dirname = 'ionic/' + file.dirname; - })) - .pipe(rename({extname: ''})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 - .pipe(plumber()) - .pipe(traceur({ - modules: 'instantiate', - moduleName: true, - annotations: true, - types: true - })) - .pipe(rename({extname: '.js'})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 - // compiled js files in playground go to the playground root, everything else goes in /ionic - .pipe(gulp.dest('dist')); -}); - -gulp.task('html', function () { - // Don't do anything with html for now - // return gulp.src(buildConfig.src.html) - // .pipe(gulp.dest(buildConfig.dist)); -}); - -gulp.task('libs', ['angular2'], function () { - return gulp.src(buildConfig.lib) - .pipe(gulp.dest('dist/lib')); -}); - -gulp.task('angular2', function () { - //transpile & concat - return gulp.src([ - 'node_modules/angular2/es6/prod/*.es6', - 'node_modules/angular2/es6/prod/src/**/*.es6' - ], { - base: 'node_modules/angular2/es6/prod' - }) - .pipe(rename(function(path){ - path.dirname = 'angular2/' + path.dirname; //this is not ideal... but not sure how to change angular's file structure - path.extname = ''; //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 - })) - .pipe(traceur({ modules: 'instantiate', moduleName: true})) - .pipe(concat('angular2.js')) - .pipe(gulp.dest('dist/lib')); -}); - gulp.task('examples', ['sass'], function() { - var examplesSrc = path.join(__dirname, 'src/components/**/examples/**/*'); + var exampleSrc = path.join(__dirname, 'src/components/**/examples/**/*'); var templateSrc = path.join(__dirname, 'scripts/examples/index.template.html'); - var examplesDest = path.join(__dirname, 'dist/examples/'); + var exampleDest = path.join(__dirname, 'dist/examples/'); - return gulp.src(examplesSrc) + return gulp.src(exampleSrc) .pipe(gulpif(/index.html/, wrap({ src: templateSrc }))) .pipe(rename(function(file) { file.dirname = file.dirname.replace('/examples/', '/'); })) - .pipe(gulp.dest(examplesDest)); + .pipe(gulp.dest(exampleDest)); }); require('./scripts/snapshot/snapshot.task')(gulp, argv, buildConfig); -gulp.task('watch-examples', ['examples'], function() { - return gulp.watch([ - 'src/**/*', - 'scripts/examples/index.template.html' - ], ['examples']); +// Take es6 files from angular2's output, rename to js, and move to dist/lib/ +gulp.task('ng2-rename', function(done) { + exec('ls dist/angular-master', function(err) { + if (err) { + console.log('You have not installed angular master.\n' + + 'Please run ./scripts/build/update-angular.sh.\n' + + 'Aborting.'); + return process.exit(1); + } + gulp.src([ + 'dist/angular-master/dist/js/dev/es6/{angular2,rtts_assert}/**/*.es6' + ]) + .pipe(rename({ extname: '.js' })) + .pipe(gulp.dest('dist/lib')) + .on('end', done); + }); }); +gulp.task('ng2', ['ng2-rename'], function() { + var builder = new SystemJsBuilder(); + return builder.loadConfig('jspm-config.js') + .then(function() { + builder.config({ + map: { + 'angular2': 'dist/lib/angular2', + 'rtts_assert': 'dist/lib/rtts_assert' + }, + paths: { + dist: undefined, + } + }); + return builder.build('angular2/angular2', 'dist/lib/angular2.js'); + }); +}); + diff --git a/jspm-config.js b/jspm-config.js index cdf09ba23e..6f9891b983 100644 --- a/jspm-config.js +++ b/jspm-config.js @@ -1,36 +1,24 @@ System.config({ - paths: { - '*': '*.js', - 'github:*': '/jspm_packages/github/*.js', - 'npm:*': '/jspm_packages/npm/*.js' + "paths": { + "*": "*.js", + "dist": "/dist" }, - traceurOptions: { - sourceMaps: true, - annotations: true, // parse annotations - types: true, // parse types - script: false, // parse as a module - memberVariables: true, // parse class fields - modules: 'instantiate' + "traceurOptions": { + "sourceMaps": true, + "annotations": true, + "types": true, + "script": false, + "memberVariables": true, + "modules": "instantiate" } }); System.config({ - map: { - 'angular2': '/dist/lib/angular2', - 'rtts_assert': '/dist/lib/rtts_assert', - 'angular/zone.js': 'github:angular/zone.js@0.4.1', - 'events': 'github:jspm/nodelibs-events@0.1.0', - 'hammer': 'github:hammerjs/hammer.js@2.0.4', - 'ionic2': '/src', - 'github:jspm/nodelibs-events@0.1.0': { - 'events-browserify': 'npm:events-browserify@0.0.1' - }, - 'github:jspm/nodelibs-process@0.1.1': { - 'process': 'npm:process@0.10.1' - }, - 'npm:events-browserify@0.0.1': { - 'process': 'github:jspm/nodelibs-process@0.1.1' - } + "map": { + "angular2": "dist/lib/angular2", + "hammer": "/node_modules/hammerjs/hammer.js", + "ionic2": "/src", + "rtts_assert": "dist/lib/rtts_assert" } }); diff --git a/package.json b/package.json index 54b186a5f3..de3f1b9790 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,6 @@ "gulp-concat": "~2.5.0", "gulp-debug": "~2.0.1", "gulp-eslint": "^0.7.0", - "gulp-exec": "^2.1.1", "gulp-if": "^1.2.5", "gulp-jscs": "^1.4.0", "gulp-plumber": "^1.0.0", @@ -35,6 +34,7 @@ "es6-module-loader": "~0.11.0", "event-stream": "^3.3.0", "gulp-template": "^3.0.0", + "hammerjs": "^2.0.4", "jasmine-core": "^2.2.0", "karma-chrome-launcher": "^0.1.7", "karma-jasmine": "^0.3.5", @@ -50,10 +50,17 @@ }, "configFile": "jspm-config.js", "dependencies": { - "angular2": "github:angular/angular@master", - "angular/zone.js": "github:angular/zone.js@0.4.1", - "events": "github:jspm/nodelibs-events@^0.1.0", - "hammer": "github:hammerjs/hammer.js@^2.0.4" + "es6-module-loader": "~0.11.0", + "event-stream": "^3.3.0", + "gulp-template": "^3.0.0", + "hammerjs": "^2.0.4", + "jasmine-core": "^2.2.0", + "karma-chrome-launcher": "^0.1.7", + "karma-jasmine": "^0.3.5", + "systemjs": "~0.11.0", + "through2": "^0.6.3", + "traceur": "0.0.87", + "zone.js": "0.4.1" } } } diff --git a/scripts/build/config.js b/scripts/build/config.js index b2508fcb96..3cfb2474bd 100644 --- a/scripts/build/config.js +++ b/scripts/build/config.js @@ -1,20 +1,10 @@ module.exports = { dist: 'dist', src: { - js: ['src/**/*.js', '!src/**/examples/**'], test: ['src/**/*.spec.js'], examples: ['src/**/examples/**'], html: 'src/**/*.html', scss: 'src/components/**/*.scss', - playgroundJs: 'playground/**/*.js', - playgroundFiles: ['playground/**/*', '!playground/**/*.js'], }, - lib: [ - 'node_modules/gulp-traceur/node_modules/traceur/bin/traceur-runtime.js', - 'node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.src.js', - 'node_modules/systemjs/lib/extension-register.js', - 'node_modules/angular2/node_modules/zone.js/zone.js', - 'node_modules/hammerjs/hammer.js' - ], protractorPort: 8876 }; diff --git a/scripts/build/update-angular.sh b/scripts/build/update-angular.sh new file mode 100755 index 0000000000..901b6122b6 --- /dev/null +++ b/scripts/build/update-angular.sh @@ -0,0 +1,20 @@ +#!/bin/sh + +NG_FOLDER=angular-master + +cd $(dirname $0)/../.. + +cd dist +if ! [ $(ls | grep $NG_FOLDER) ]; then + echo "Cloning angular2 to dist/angular-master..." + git clone git@github.com:angular/angular $NG_FOLDER +fi + +cd $NG_FOLDER +echo "Running npm install in angular2..." +npm install + +echo "Running gulp to build source..." +gulp build/transpile.js.dev.es6 + +echo "-- DONE --" diff --git a/scripts/examples/examples.js b/scripts/examples/examples.js deleted file mode 100644 index dfce4c31cd..0000000000 --- a/scripts/examples/examples.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Created by perry on 3/19/15. - * A place to do more complicated demo generation - * TODO: more complicated demo generation - */ - -var wrap = require("gulp-wrap"); - -module.exports = function(gulp, argv) { - -}; diff --git a/scripts/examples/index.template.html b/scripts/examples/index.template.html index 023f637a45..b400947e3b 100644 --- a/scripts/examples/index.template.html +++ b/scripts/examples/index.template.html @@ -6,8 +6,9 @@ - - + + + diff --git a/scripts/examples/template/index.html b/scripts/examples/template/index.html deleted file mode 100644 index eade2bd593..0000000000 --- a/scripts/examples/template/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - Ionic 2 Example - - - -