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的编译.打包 该需求以前面的内容为基础 可 ...
随机推荐
- BZOJ_3159_决战
题目链接 分析: 我使用树剖+splay维护这个东西. 对每条重链维护一棵splay,链加和查询正常做,剩下的链反转如下. 由于一定是深度递增的一条链,我们树剖将它分成从左到右log个区间,提取出对应 ...
- BZOJ_3165_[Heoi2013]Segment_线段树
BZOJ_3165_[Heoi2013]Segment_线段树 Description 要求在平面直角坐标系下维护两个操作: 1.在平面上加入一条线段.记第i条被插入的线段的标号为i. 2.给定一个数 ...
- bzoj 3073 [Pa2011]Journeys ——线段树优化连边
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3073 建两棵线段树,一棵孩子向父亲连边,是走出去的:一棵父亲向孩子连边,是走进来的. 注意第 ...
- kindle 3 webbrowser破解，
首先下载破解: http://183.60.157.10/down_group83/M00/06/31/tzydCk3MyHYAAAAAAUTLHFYI-wk8562757/webpatch.7z?k ...
- 响应式web设计，html5和css3实战（@author Ben Fraim）
重定向 //请求重定向简化写法 response.sendRedirect("/day09/adv.html"); 转发 request.getRequestDispatcher( ...
- 【转】Pro Android学习笔记（二）：开发环境：基础概念、连接真实设备、生命周期
在Android学习笔记(二):安装环境中已经有相应的内容.看看何为新.这是在source网站上的Android架构图,和标准图没有区别,只是这张图颜色好看多了,录之.本笔记主要讲述Android开发 ...
- 排名Top 16的Java实用类库
(转载: http://www.hollischuang.com/archives/1606) github地址: https://github.com/liufeiSAP/javaStudy.git ...
- Windows下搭建svn服务器端--创建自…
Windows下搭建svn服务器端 1.软件 1)服务端:Subversion subversion.apache.org - Getting Subversion - Binary Packages ...
- Ubuntu下CodeBlocks更改调试终端
Ubuntu下CodeBlocks更改调试终端 Ubuntu下的CodeBlocks自带的调试终端xterm不能进行复制粘贴操作,更换调试终端就可以解决了,就是把ubuntu下的gnome-ter ...
- ubuntu 14.04 部署Django项目
一.购买服务器 推荐 vultr的服务器,还可以_ _ _,链接:传送门 操作系统建议选 ubuntu 14.04 64位 二.购买域名 链接:传送门 三.安装相关软件 # 创建一个叫mu的用户 ro ...