目标

创建一个基于angular2的组件开发工程，在此工程可以实现组件打包，组件演示；

目录结构图

步骤

1、利用angular2-cli脚手架创建一个默认工程；

2、修改package.json如下：

{
  "name": "glory-ui","version": "0.0.7","description": "component lib for Angular2","main": "dist/index.js","typings": "dist/index.d.ts","files": [
    "dist","resources"
  ],"scripts": {
    "ng": "ng","start": "ng serve","e2e": "ng e2e","watch": "tsc --watch","lint": "tslint 'src/**/*.ts'","pretest": "npm run lint","test": "karma start","prebuild": "rimraf dist","build": "tsc","ngc": "ngc -p .","build-aot": "ngc -p tsconfig-aot.json","build-release": "ngc -p tsconfig-release.json","karma:debug": "karma start --auto-watch --no-single-run --browsers Chrome","typedoc": "typedoc","docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/"
  },"devDependencies": {
    "@angular/common": "^4.0.0","@angular/compiler": "^4.0.0","@angular/core": "^4.0.0","@angular/forms": "^4.0.0","@angular/http": "^4.0.0","@angular/platform-browser": "^4.0.0","@angular/platform-browser-dynamic": "^4.0.0","@angular/router": "^4.0.0","core-js": "^2.4.1","rxjs": "^5.1.0","zone.js": "^0.8.4","@angular/cli": "1.0.0","@angular/compiler-cli": "^4.0.0","@types/hammerjs": "^2.0.32","@types/jasmine": "2.5.38","@types/node": "~6.0.60","@types/source-map": "^0.5.0","@types/uglify-js": "^2.0.27","@types/webpack": "~2.0.0","angular2-template-loader": "^0.6.2","awesome-typescript-loader": "^2.0.1","codelyzer": "~2.0.0","copy-webpack-plugin": "^3.0.1","css-loader": "^0.23.1","es6-promise": "^3.1.2","es6-promise-loader": "^1.0.1","es6-shim": "^0.35.1","es7-reflect-Metadata": "^1.6.0","exports-loader": "^0.6.3","expose-loader": "^0.7.1","file-loader": "^0.9.0","gulp": "^3.9.1","gulp-concat": "^2.6.0","gulp-flatten": "^0.2.0","gulp-rename": "^1.2.2","gulp-uglify": "^1.5.3","gulp-uglifycss": "^1.0.6","html-webpack-plugin": "^2.28.0","imports-loader": "^0.6.5","istanbul-instrumenter-loader": "^0.2.0","jasmine-core": "~2.5.2","jasmine-spec-reporter": "~3.2.0","json-loader": "^0.5.4","karma": "~1.4.1","karma-chrome-launcher": "~2.0.0","karma-cli": "~1.0.1","karma-coverage": "^1.1.0","karma-coverage-istanbul-reporter": "^0.2.0","karma-jasmine": "~1.1.0","karma-jasmine-html-reporter": "^0.2.2","karma-mocha-reporter": "^2.0.4","karma-phantomjs-launcher": "^1.0.1","karma-sourcemap-loader": "^0.3.7","karma-webpack": "^1.7.0","protractor": "~5.1.0","raw-loader": "0.5.1","rimraf": "^2.5.2","source-map-loader": "^0.1.5","style-loader": "^0.13.1","systemjs": "0.19.38","to-string-loader": "^1.1.4","ts-helpers": "1.1.1","ts-node": "~2.0.0","tslint": "~4.5.0","tslint-loader": "^3.4.3","typedoc": "^0.4.4","typescript": "~2.2.0","url-loader": "^0.5.7","webpack": "2.3.1","webpack-dashboard": "^0.1.8","webpack-dev-middleware": "^1.8.1","webpack-dev-server": "^2.1.0-beta.4 ","webpack-md5-hash": "^0.0.5","webpack-merge": "^0.14.1","webpack-stream": "^3.2.0"
  }
}

3、修改tsconfig.json如下：

{
  "compileOnSave": false,"compilerOptions": {
    "outDir": "dist","baseUrl": "src","sourceMap": true,"declaration": false,"moduleResolution": "node","emitDecoratorMetadata": true,"experimentalDecorators": true,"target": "es5","typeRoots": [
      "node_modules/@types"
    ],"lib": [
      "es2016","dom"
    ]
  }
}

4、根目录新建tsconfig-aot.json如下：

{
  "compilerOptions": {
    "outDir": "dist","module": "es2015","removeComments": false,"noImplicitAny": false,"suppressImplicitAnyIndexErrors": true,"lib": ["dom","es6"]
  },"include": [
    "src/app/components/**/*"
  ],"angularCompilerOptions": {
   "genDir": "aot","skipMetadataEmit" : false
 }
}

5、根目录下创建gulpfile.js文件，内容如下：

'use strict';

var gulp = require('gulp'),concat = require('gulp-concat'),uglifycss = require('gulp-uglifycss'),rename = require('gulp-rename'),del = require('del'),flatten = require('gulp-flatten');

gulp.task('build-css',function () {
  gulp.src([
    'src/app/components/common/common.css','src/app/components/**/*.css'
  ])
    .pipe(concat('glory-ui.css'))
    .pipe(gulp.dest('resources'));
});

gulp.task('build-css-prod','src/app/components/**/*.css'
  ])
    .pipe(concat('glory-ui.css'))
    .pipe(gulp.dest('resources'))
    .pipe(uglifycss({"uglyComments": true}))
    .pipe(rename('glory-ui.min.css'))
    .pipe(gulp.dest('resources'));
});

gulp.task('images',function () {
  return gulp.src([
    'src/app/components/**/images/*.png','src/app/components/**/images/*.gif','src/app/components/**/images/*.svg','src/assets/components/images/*.png','src/assets/components/images/*.gif','src/assets/components/images/*.svg'
  ])
    .pipe(flatten())
    .pipe(gulp.dest('resources/images'));
});

gulp.task('themes',function () {
  return gulp.src(['src/assets/components/themes/**/*'])
    .pipe(gulp.dest('resources/themes'));
});

//Cleaning prevIoUs gulp tasks from project
gulp.task('clean',function () {
  del(['resources']);
});

//Building project with run sequence
gulp.task('build-assets',['clean','build-css-prod','images','themes']);

6、接下来再重点看下app下面的两个文件夹：

components存放组件相关代码，showcase存放组件演示代码；

7、命令行运行npm install安装全部依赖，到这里结构已经创建完成，可以尽情地写自己的组件了。写完组件可以选择上到到自己的npm帐户下面，提供项目调用