目录结构：

projectName

　　|_ src

　　　　|_ app

　　　　|_ index.html

　　　　|_ main.ts

　　　　|_ systemjs.config.js

　　|_ gulpfile.js

　　|_ package.json

　　|_ tsconfig.json

gulpfile.js

  1. var gulp = require('gulp');
  2. // typescript编译插件
  3. var ts = require('gulp-typescript');
  4. var tsProject = ts.createProject('tsconfig.json');
  5. // 生成js.map文件，便于调试
  6. var sourcemaps = require('gulp-sourcemaps');
  7. // web服务器插件
  8. var browserSync = require('browser-sync').create();
  9. var reload = browserSync.reload;
  10. var historyApiFallback = require('connect-history-api-fallback');
  11.  
  12. // 监控文件目录
  13. var tsFiles = 'src/**/*.ts';
  14. var staticFiles = ['src/**/*', '!' + tsFiles];
  15. var npm = 'node_modules/';
  16. var nodeModules = [npm + '@angular/**/bundles/**/*', npm + 'angular-in-memory-web-api/bundles/**/*', npm + 'rxjs/**/*', npm + 'core-js/client/**/*', npm + 'zone.js/dist/**/*', npm + 'systemjs/dist/**/*'
  17.     , npm + 'systemjs-plugin-css/**/*', npm + 'jquery/dist/**/*', npm + 'bootstrap/dist/**/*', npm + 'font-awesome/**/*', npm + 'bootstrap-table/dist/**/*', npm + 'ng2-translate/bundles/*'
  18.     , npm + 'bootbox/bootbox.min.js', npm + '@ng-bootstrap/**/*', npm + 'oeslib/**/*', npm + 'zenap-smart-Table/**/*'
  19. ];
  20.  
  21. // tsc任务，编译ts源代码，并输出到dist目录
  22. gulp.task('tsc', function () {
  23.     gulp.src(tsFiles).pipe(sourcemaps.init()).pipe(tsProject())
  24.         .pipe(sourcemaps.write('maps')).pipe(gulp.dest('dist'));
  25. });
  26.  
  27. // static任务，拷贝静态文件(除ts之外的html、css等文件)到dist目录
  28. gulp.task('static', function () {
  29.     gulp.src(staticFiles).pipe(gulp.dest('dist'));
  30. });
  31.  
  32. // modules任务，拷贝node_modules依赖插件文件到dist目录
  33. gulp.task('modules', function () {
  34.     gulp.src(nodeModules, { base: 'node_modules' }).pipe(gulp.dest('dist/plugin'));
  35. });
  36.  
  37. // watch任务，监视文件变更，重新输出到dist目录
  38. gulp.task('watch-ts', ['tsc'], function (done) {
  39.     browserSync.reload();
  40.     done();
  41. });
  42.  
  43. gulp.task('watch-static', ['static'], function (done) {
  44.     browserSync.reload();
  45.     done();
  46. });
  47.  
  48. // 启动web服务器
  49. gulp.task('server', ['tsc', 'static', 'modules'], function () {
  50.     browserSync.init({
  51.         server: {
  52.             baseDir: "dist",
  53.             middleware: [historyApiFallback()] // 使用angular的html5模式(hash)路由，需要此配置
  54.         }
  55.     });
  56.  
  57.     gulp.watch(tsFiles, ['watch-ts']);
  58.     gulp.watch(staticFiles, ['watch-static']);
  59. });
  60.  
  61. // default任务，命令行运行gulp的默认任务
  62. gulp.task('default', ['server'], function () {
  63. });

package.json

  1. {
  2.   "name": "angular-quickstart",
  3.   "version": "1.0.0",
  4.   "description": "QuickStart package.json from the documentation, supplemented with testing support",
  5.   "scripts": {
  6.     "start": "gulp"
  7.   },
  8.   "keywords": [],
  9.   "author": "",
  10.   "license": "MIT",
  11.   "dependencies": {
  12.     "@angular/common": "~2.4.0",
  13.     "@angular/compiler": "~2.4.0",
  14.     "@angular/core": "~2.4.0",
  15.     "@angular/forms": "~2.4.0",
  16.     "@angular/http": "~2.4.0",
  17.     "@angular/platform-browser": "~2.4.0",
  18.     "@angular/platform-browser-dynamic": "~2.4.0",
  19.     "@angular/router": "~3.4.0",
  20.     "angular-in-memory-web-api": "~0.2.4",
  21.     "bootstrap": "^3.3.7",
  22.     "core-js": "^2.4.1",
  23.     "rxjs": "5.0.1",
  24.     "systemjs": "0.19.40",
  25.     "zone.js": "^0.7.4"
  26.   },
  27.   "devDependencies": {
  28.     "@types/jasmine": "2.5.36",
  29.     "@types/node": "^6.0.46",
  30.     "browser-sync": "^2.18.6",
  31.     "gulp": "^3.9.1",
  32.     "gulp-typescript": "^3.1.5",
  33.     "typescript": "~2.0.10",
  34.     "gulp-sourcemaps": "^2.4.1"
  35.   },
  36.   "repository": {}
  37. }

src/index.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Project1</title>
  6.   <base href="/">
  7.  
  8.   <meta name="viewport" content="width=device-width, initial-scale=1">
  9.   <link rel="icon" type="image/x-icon" href="favicon.ico">
  10.   <script src="plugin/core-js/client/shim.min.js"></script>
  11.   <script src="plugin/zone.js/dist/zone.js"></script>
  12.   <script src="plugin/systemjs/dist/system.src.js"></script>
  13.   <!--导入systemjs.config.js文件，重要-->
  14.   <script src="systemjs.config.js"></script>
  15.   <script>
  16.       // 导入main.js，加载App.module.js文件，重要
  17.       System.import('app/main.js').catch(function(err){ console.error(err); });
  18.   </script>
  19. </head>
  20. <body>
  21.   <app-root>Loading...</app-root>
  22. </body>
  23. </html>

src/main.ts

  1. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  2.  
  3. import { AppModule } from './app.module';
  4.  
  5. platformBrowserDynamic().bootstrapModule(AppModule);

src/systemjs.config.js

  1. /**
  2.  * System configuration for Angular samples
  3.  * Adjust as necessary for your application needs.
  4.  */
  5. (function (global) {
  6.   System.config({
  7.     paths: {
  8.       // paths serve as alias
  9.       'npm:': 'plugin/'
  10.     },
  11.     // map tells the System loader where to look for things
  12.     map: {
  13.       // our app is within the app folder
  14.       app: 'app',
  15.  
  16.       // angular bundles
  17.       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  18.       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  19.       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  20.       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  21.       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  22.       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  23.       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  24.       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  25.  
  26.       // other libraries
  27.       'rxjs':                      'npm:rxjs',
  28.       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
  29.     },
  30.     // packages tells the System loader how to load when no filename and/or no extension
  31.     packages: {
  32.       app: {
  33.         main: './main.js',
  34.         defaultExtension: 'js'
  35.       },
  36.       rxjs: {
  37.         defaultExtension: 'js'
  38.       }
  39.     }
  40.   });
  41. })(this);

gulp管理angular2项目 配置文件的更多相关文章

  1. Django项目引入NPM和gulp管理前端资源

    前言 之前写了一篇<Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件>,现在又来用Django开发项目了,之前我搞了一个Django的快速开发脚手架「DjangoSt ...

  2. 使用 gulp 构建一个项目

    本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gul ...

  3. 使用gulp解决RequireJS项目前端缓存问题（一）

    1.前言 前端缓存一直是个令人头疼的问题,你有可能见过下面博客园首页的资源文件链接: 有没有发现文件名后面有一串不规则的东东,没错,这就是运用缓存机制,我们今天研究的就是这种东西. 先堵为快,猛戳链接 ...

  4. 使用maven来管理java项目

    初学maven,简单总结一下学习心得,若有不对的地方,欢迎各位大神给我指正~ 总结分为6个部分 maven概述 maven安装 maven项目结构和创建方法 maven配置文件settings.xml ...

  5. gulp进阶构建项目由浅入深

    gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...

  6. 使用gulp打包普通项目

    前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓 ...

  7. 使用自建Git服务器管理私有项目 Centos 7.3 + Git 2.11.0 + gitosis (实测 笔记)

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7-x86_64-Minimal-1611.iso GIT服务器IP:192.168.1 ...

  8. springmvc 项目完整示例02 项目创建-eclipse创建动态web项目 配置文件 junit单元测试

    包结构 所需要的jar包直接拷贝到lib目录下 然后选定 build path 之后开始写项目代码 配置文件 ApplicationContext.xml <?xml version=" ...

  9. Linux上Makefile管理java项目

    前面文章讲到了Linux上通过.spec文件与rpmbuild命令将java程序打包为RPM安装包, 现阶段遇到新的需求: 使用Makefile来操纵java的编译.打包 该需求以前面的内容为基础 可 ...

随机推荐

  1. MySQL-left join _20160928

    left join 左连接 返回from 后面表的全部记录和 left join 后面表和from 后面表条件相符的全部记录 一般格式为下面,首先table A 和tableB都有两个唯一的字段标识I ...

  2. ACM学习历程——HDU5202 Rikka with string（dfs，回文字符串）

    Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...

  3. 【LeetCode】053. Maximum Subarray

    题目: Find the contiguous subarray within an array (containing at least one number) which has the larg ...

  4. phantomjs学习

    PhantomJS快速入门 本文简要介绍了PhantomJS的相关基础知识点,主要包括PhantomJS的介绍.下载与安装.HelloWorld程序.核心模块介绍等.由于鄙人才疏学浅,难免有疏漏之处, ...

  5. 重学JAVA基础(四):线程的创建与执行

    1.继承Thread public class TestThread extends Thread{ public void run(){ System.out.println(Thread.curr ...

  6. VijosP1100:加分二叉树

    描述 设一个n个节点的二叉树tree的中序遍历为(l,2,3,…,n),其中数字1,2,3,…,n为节点编号.每个节点都有一个分数(均为正整数),记第i个节点的分数为di,tree及它的每个子树都有一 ...

  7. AI-Info-Micron-Insight：高速数据：第四次工业革命的助推引擎

    ylbtech-AI-Info-Micron-Insight:高速数据:第四次工业革命的助推引擎 1.返回顶部 1. 高速数据:第四次工业革命的助推引擎 第四次工业革命已然来临,因为数字技术几乎连接了 ...

  8. [poj3368]Frequent values(rmq)

    题意:给出n个数和Q个询问(l,r),对于每个询问求出(l,r)之间连续出现次数最多的次数. 解题关键:统计次数,转化为RMQ问题,运用st表求解,注意边界. 预处理复杂度:$O(n\log n)$ ...

  9. 交互原型设计软件axure rp学习之路(二)

    (二)Axure rp的线框图元件 l  图片 图片元件拖入编辑区后,可以通过双击选择本地磁盘中的图片,将图片载入到编辑区,axure会自动提示将大图片进行优化,以避免原型文件过大:选择图片时可以选择 ...

  10. SelectObject()函数详解

    SelectObject 把一个对象(位图.画笔.画刷等)选入指定的设备描述表.新的对象代替同一类型的老对象. HGDIOBJ SelectObject(   HDC hdc,          // ...