gulp管理angular2项目配置文件

目录结构：

projectName

　　|_ src

　　　　|_ app

　　　　|_ index.html

　　　　|_ main.ts

　　　　|_ systemjs.config.js

　　|_ gulpfile.js

　　|_ package.json

　　|_ tsconfig.json

gulpfile.js

var gulp = require('gulp');

// typescript编译插件

var ts = require('gulp-typescript');

var tsProject = ts.createProject('tsconfig.json');

// 生成js.map文件，便于调试

var sourcemaps = require('gulp-sourcemaps');

// web服务器插件

var browserSync = require('browser-sync').create();

var reload = browserSync.reload;

var historyApiFallback = require('connect-history-api-fallback');

// 监控文件目录

var tsFiles = 'src/**/*.ts';

var staticFiles = ['src/**/*', '!' + tsFiles];

var npm = 'node_modules/';

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/**/*'

    , npm + 'systemjs-plugin-css/**/*', npm + 'jquery/dist/**/*', npm + 'bootstrap/dist/**/*', npm + 'font-awesome/**/*', npm + 'bootstrap-table/dist/**/*', npm + 'ng2-translate/bundles/*'

    , npm + 'bootbox/bootbox.min.js', npm + '@ng-bootstrap/**/*', npm + 'oeslib/**/*', npm + 'zenap-smart-Table/**/*'

];

// tsc任务，编译ts源代码，并输出到dist目录

gulp.task('tsc', function () {

    gulp.src(tsFiles).pipe(sourcemaps.init()).pipe(tsProject())

        .pipe(sourcemaps.write('maps')).pipe(gulp.dest('dist'));

});

// static任务，拷贝静态文件(除ts之外的html、css等文件)到dist目录

gulp.task('static', function () {

    gulp.src(staticFiles).pipe(gulp.dest('dist'));

});

// modules任务，拷贝node_modules依赖插件文件到dist目录

gulp.task('modules', function () {

    gulp.src(nodeModules, { base: 'node_modules' }).pipe(gulp.dest('dist/plugin'));

});

// watch任务，监视文件变更，重新输出到dist目录

gulp.task('watch-ts', ['tsc'], function (done) {

    browserSync.reload();

    done();

});

gulp.task('watch-static', ['static'], function (done) {

    browserSync.reload();

    done();

});

// 启动web服务器

gulp.task('server', ['tsc', 'static', 'modules'], function () {

    browserSync.init({

        server: {

            baseDir: "dist",

            middleware: [historyApiFallback()] // 使用angular的html5模式(hash)路由，需要此配置

        }

    });

    gulp.watch(tsFiles, ['watch-ts']);

    gulp.watch(staticFiles, ['watch-static']);

});

// default任务，命令行运行gulp的默认任务

gulp.task('default', ['server'], function () {

});

package.json

{

  "name": "angular-quickstart",

  "version": "1.0.0",

  "description": "QuickStart package.json from the documentation, supplemented with testing support",

  "scripts": {

    "start": "gulp"

  },

  "keywords": [],

  "author": "",

  "license": "MIT",

  "dependencies": {

    "@angular/common": "~2.4.0",

    "@angular/compiler": "~2.4.0",

    "@angular/core": "~2.4.0",

    "@angular/forms": "~2.4.0",

    "@angular/http": "~2.4.0",

    "@angular/platform-browser": "~2.4.0",

    "@angular/platform-browser-dynamic": "~2.4.0",

    "@angular/router": "~3.4.0",

    "angular-in-memory-web-api": "~0.2.4",

    "bootstrap": "^3.3.7",

    "core-js": "^2.4.1",

    "rxjs": "5.0.1",

    "systemjs": "0.19.40",

    "zone.js": "^0.7.4"

  },

  "devDependencies": {

    "@types/jasmine": "2.5.36",

    "@types/node": "^6.0.46",

    "browser-sync": "^2.18.6",

    "gulp": "^3.9.1",

    "gulp-typescript": "^3.1.5",

    "typescript": "~2.0.10",

    "gulp-sourcemaps": "^2.4.1"

  },

  "repository": {}

}

src/index.html

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>Project1</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script src="plugin/core-js/client/shim.min.js"></script>

  <script src="plugin/zone.js/dist/zone.js"></script>

  <script src="plugin/systemjs/dist/system.src.js"></script>

  <!--导入systemjs.config.js文件，重要-->

  <script src="systemjs.config.js"></script>

  <script>

      // 导入main.js，加载App.module.js文件，重要

      System.import('app/main.js').catch(function(err){ console.error(err); });

  </script>

</head>

<body>

  <app-root>Loading...</app-root>

</body>

</html>

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

src/systemjs.config.js

/**

 * System configuration for Angular samples

 * Adjust as necessary for your application needs.

 */

(function (global) {

  System.config({

    paths: {

      // paths serve as alias

      'npm:': 'plugin/'

    },

    // map tells the System loader where to look for things

    map: {

      // our app is within the app folder

      app: 'app',

      // angular bundles

      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',

      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',

      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',

      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',

      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',

      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',

      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',

      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries

      'rxjs':                      'npm:rxjs',

      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

    },

    // packages tells the System loader how to load when no filename and/or no extension

    packages: {

      app: {

        main: './main.js',

        defaultExtension: 'js'

      },

      rxjs: {

        defaultExtension: 'js'

      }

    }

  });

})(this);

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

Django项目引入NPM和gulp管理前端资源
前言之前写了一篇<Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件>,现在又来用Django开发项目了,之前我搞了一个Django的快速开发脚手架「DjangoSt ...
使用 gulp 构建一个项目
本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gul ...
使用gulp解决RequireJS项目前端缓存问题（一）
1.前言前端缓存一直是个令人头疼的问题,你有可能见过下面博客园首页的资源文件链接: 有没有发现文件名后面有一串不规则的东东,没错,这就是运用缓存机制,我们今天研究的就是这种东西. 先堵为快,猛戳链接 ...
使用maven来管理java项目
初学maven,简单总结一下学习心得,若有不对的地方,欢迎各位大神给我指正~ 总结分为6个部分 maven概述 maven安装 maven项目结构和创建方法 maven配置文件settings.xml ...
gulp进阶构建项目由浅入深
gulp进阶构建项目由浅入深阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...
使用gulp打包普通项目
前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓 ...
使用自建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 ...
springmvc 项目完整示例02 项目创建-eclipse创建动态web项目配置文件 junit单元测试
包结构所需要的jar包直接拷贝到lib目录下然后选定 build path 之后开始写项目代码配置文件 ApplicationContext.xml <?xml version=" ...
Linux上Makefile管理java项目
前面文章讲到了Linux上通过.spec文件与rpmbuild命令将java程序打包为RPM安装包, 现阶段遇到新的需求: 使用Makefile来操纵java的编译.打包该需求以前面的内容为基础可 ...

随机推荐

每天一个Linux命令（2）：ls命令
版权声明更新:2017-04-26博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍本文介绍了Linux下命令ls. 2 开 ...
MSTAR 平台
MApp_Menu.c ZUI_exefunc.h //菜单属性 MApp_ZUI_APItables.h #define GETWNDINFO(hwnd) (&g_GUI_WindowLis ...
并查集基础模板题 hdu1232 畅通工程
模板题引入并查集——一则有趣的故事为了解释并查集的原理,我将举一个更有趣的例子.话说江湖上散落着各式各样的大侠,有上千个之多.他们没有什么正当职业,整天背着剑在外面走来走去,碰到和自己不是一路人的 ...
三 lambda表达式有什么用
(转载: https://mp.weixin.qq.com/s/-PHOc6p-qKJBktle28AUgA) 一: 直接把代码块赋值给变量我们知道,对于一个Java变量,我们可以赋给其一个“值”. ...
PHP 文件导出（Excel, CSV，txt）
PHPExcel: 可以在我的文件中下载phpexcel放到项目中用!! 1,Excel 导出: /** * Excel导出例子 */ public function excel($res){ $ob ...
【机器学习】分类算法——Logistic回归
一.LR分类器(Logistic Regression Classifier) 在分类情形下,经过学习后的LR分类器是一组权值w0,w1, -, wn,当测试样本的数据输入时,这组权值与测试数据按照线 ...
Socket 阻塞与非阻塞模式
http://blog.sina.com.cn/s/blog_5d0990c7010115ib.html
2019计蒜之道初赛4 B. 腾讯益智小游戏—矩形面积交（简单）（矩形交集）
B. 腾讯益智小游戏—矩形面积交(简单) 1000ms 262144K 腾讯游戏开发了一款全新的编程类益智小游戏,最新推出的一个小游戏题目是关于矩形面积交的.聪明的你能解出来吗?看下面的题目接招吧 ...
echarts学习的一些笔记
工具栏组件 Show 是否显示 Feature 具体显示的功能 saveAslmage 保存图片 Restore 还原 dataZoom 缩放视图 magicType 动态类型切换 toltip组 ...
719D(树形dp)
题目链接:http://codeforces.com/contest/791/problem/D 题意:给出一棵树,每两个点之间的距离为1,一步最多可以走距离 k,问要将任意两个点之间的路径都走一遍, ...

gulp管理angular2项目 配置文件

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

随机推荐

热门专题

gulp管理angular2项目配置文件

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