Yeoman + Angular2

Posted by On 6月 20, 2016 0 Comment

Yeoman and Angular2

In Angular1, Yeoman provides powerful tool set.
In Angular2, several people try to create yoeman generator, or others create angular2 project genearator by themselves.
(angular-cli, angular-seed etc…)
So far, there aren’t great tool same as angular1, yoeman. Some tools are not easy-customization, etc…
I will try some using some tool.

Yoeman and generator-angular2

Install dependencies

npm install -g yo
npm install -g bower
npm install -g generator-angular2

If you don’t have nodejs, please install nodejs

Create project

Create project directory and start yeoman

mkdir myproject
cd myproject
yo

Select Angular2 to create angular2 project

By default, all source codes are under src

myproject
|- build
|- node_modules
|-src
|   |- xxxx.js
|-gulpfile.js
|-package.json

If you run following command, first project will work

gulp
gulp serve

Change directory structure and code

I want to clean directory structure as I can understand easily.

myproject
| - src
     |- index.html
     |- app
     |   |- app.js
     |   |- main.js
     |- styles
     |   |- index.css

Separate js and css files

Add some task to gulp

Clean build file is useful to clean build file.
Also, add js dependencies etc…

Finally, gulpfile.js becomes 

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    traceur = require('gulp-traceur'),
    webserver = require('gulp-webserver'),
    del = require('del');


var config = {
   sourceDir: 'src',
   buildDir: 'build',
   npmDir: 'node_modules'
};

// clean
gulp.task('clean', function() {
   return del(config.buildDir + '/**/*', { force: true });
});

// run init tasks
gulp.task('default', ['dependencies', 'js', 'html', 'css']);

// run development task
gulp.task('dev', ['watch', 'serve']);

// serve the build dir
gulp.task('serve', function () {
  gulp.src(config.buildDir)
    .pipe(webserver({
      open: true
    }));
});

// watch for changes and run the relevant task
gulp.task('watch', function () {
  gulp.watch('src/**/*.js', ['js']);
  gulp.watch('src/**/*.html', ['html']);
  gulp.watch('src/**/*.css', ['css']);
});

// move dependencies into build dir
gulp.task('dependencies', function () {
  return gulp.src([
    'node_modules/traceur/bin/traceur-runtime.js',
    'node_modules/systemjs/dist/system-csp-production.src.js',
    'node_modules/systemjs/dist/system.js',
    'node_modules/reflect-metadata/Reflect.js',
    'node_modules/angular2/bundles/angular2.js',
    'node_modules/angular2/bundles/router.js',
    'node_modules/angular2/bundles/angular2-polyfills.js',
    'node_modules/rxjs/bundles/Rx.js',
    'node_modules/es6-shim/es6-shim.min.js',
    'node_modules/es6-shim/es6-shim.map'
  ])
    .pipe(gulp.dest(config.buildDir + '/lib'));
});

// transpile & move js
gulp.task('js', function () {
  return gulp.src(config.sourceDir + '/**/*.js')
    .pipe(rename({
      extname: ''
    }))
    .pipe(traceur({
      modules: 'instantiate',
      moduleName: true,
      annotations: true,
      types: true,
      memberVariables: true
    }))
    .pipe(rename({
      extname: '.js'
    }))
    .pipe(gulp.dest(config.buildDir));
});

// move html
gulp.task('html', function () {
  return gulp.src(config.sourceDir + '/**/*.html')
    .pipe(gulp.dest('build'))
});

// move css
gulp.task('css', function () {
  return gulp.src(config.sourceDir + '/**/*.css')
    .pipe(gulp.dest('build'))
});

Run

Build and Run

gulp
gulp serve

TOPICS