您的位置：首页 > Web前端 > AngularJS

新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目

2016-12-28 17:43 716 查看

环境

windows 10

准备工具

Visual Studio Code

Node.js

Git

需求

必须支持IE8

步骤开始：

执行命令行工具

mkdir Demo && cd Demo


npm init


name: demo

version:0.0.1

description:This is a demo.

entry point:[Enter]

test command:[Enter]

git repository:[Enter]

keywords:[Enter]

author:羊驼

license:[Enter]

Is this ok? (yes) [Enter]

启动Visual Studio Code

code .


编辑package.json文件

{
"name": "demo",
"version": "0.0.1",
"private": false,
"description": "This is a Demo.",
"author": "羊驼"
}


创建一个Git本地仓库

git init


创建 README.md

echo This is a Demo. > README.md


通过NPM安装bootstrap及相关依赖

npm install --save -d bootstrap


npm install --save -d html5shiv


npm install --save -d respond.js


--save 参数可以自动将安装的内容加入package.json文件中dependencies中

-d 参数我比较喜欢加，可以看到一些详细安装过程

html5shiv 和 respond.js 这个算提前安装吧，主要是为了照顾IE8

创建默认页面

通过Visual Studio Code在工作区根目录下添加default.htm文件。

这里推荐安装一个Visual Studio Code的插件：Bootstrap 3 Snippets

编辑default.htm文件，这里只利用了bootstrap的CSS内容。如果安装了插件，可以输入bs3-template快速构建页面内容。最终编辑结果如下：

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>

<!-- Bootstrap CSS -->
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="./node_modules/html5shiv/dist/html5shiv.js"></script>
<script src="./node_modules/respond.js/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1 class="text-center">Hello World</h1>
</body>
</html>


通过.gitignore控制Git忽略node_modules目录

node_modules 文件夹通常不提交到源代码服务器，所以需要忽略掉

echo node_modules > .gitignore


安装http-server

npm install -g -d http-server


-g 参数可以全局安装

对于一个环境，全局安装执行一次就可以了。

启动web服务进行验证

http-server


默认启动8080端口，也可以自己指定。在浏览器中输入 http://localhost:8080/default.htm 可以看到 Hello World 。

通过开发者调试工具，可以检查是否已正确加载所有文件。截图调试的时候启用仿真，文档模式为IE8。



安装typescript

npm install -g -d typescript


全局安装是为了执行命令

npm install --save-dev -d typescript


--save-dev 可以自动保存安装的包加入package.json中的 devDependencies

添加app.ts文件并编辑

这里先添加一段示例代码，代码来自 http://www.typescriptlang.org/play/index.html 
function Greeter(greeting) {
this.greeting = greeting;
}

Greeter.prototype.greet = function() {
return "Hello, " + this.greeting;
}

// Oops, we're passing an object when we want a string. This will print
// "Hello, [object Object]" instead of "Hello, world" without error.
let greeter = new Greeter("world");

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
alert(greeter.greet());
};

document.body.appendChild(button);


通过app.ts文件生成app.js

tsc app.ts


编译成功，可以查看生成的js文件，有兴趣的可以尝试执行一下

添加tsconfig.json配置

在工作区添加文件tsconfig.json并编辑

{
"compilerOptions": {
"target": "es3",
"noImplicitAny": false,
"module": "amd",
"removeComments": false,
"sourceMap": true,
"outDir": "."
},
　　"exclude": [ "node_modules" ]
}


target:es3 使用ECMAScript 3

noImplicitAny: false 当noImplicitAny 标志为 false 的时候,如果编译器不能根据变量的使用来推断变量的类型,直接默认为 any 类型.

module:amd

removeComments:false 是否移除注释

sourceMap:true 生成map文件，一会调试的时候可以看到

outDir:. 编译输出js的文件夹

exclude:[ "node_modules" ] 编译的时候排除 node_modules 下的内容

重新输入命令进行编辑

tsc


在 default.htm 中引用 app.js 并调试

<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>

<!-- Bootstrap CSS -->
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="./node_modules/html5shiv/dist/html5shiv.js"></script>
<script src="./node_modules/respond.js/dest/respond.min.js"></script>
<![endif]-->
</head>

<body>
<h1 class="text-center">Hello World</h1>

<script src="app.js"></script>
</body>

</html>


由于使用map，调试的时候可以直接使用 app.ts



安装 gulp 和 gulp-typescript 用于编译

npm install --save-dev -d gulp


npm install -g -d gulp-cli


npm install --save-dev -d gulp-typescript


npm install --save-dev -d pump


npm install --save-dev -d gulp-sourcemaps


gulp-cli 帮助在命令提示符中执行gulp命令

gulp-sourcemaps 帮忙生成map文件

添加 gulpfile.js 文件（后续考虑使用 gulpfile.ts？）

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

// ts 编译
gulp.task('default', [], function (cb) {
var tsProject = ts.createProject('tsconfig.json');

pump([
gulp.src(['*.ts']),
sourcemaps.init({ loadMaps: true }),
tsProject(),
sourcemaps.write('.'),
gulp.dest('.')
], cb);
});


执行 gulp 命令生成 app.js 和 app.js.map

gulp


Visual Studio Code配置生成任务

【查看】-> 【命令面板】-> 输入【任务:配置任务运行程序】（保留前面的 >）

选择 gulp， 在工作空间的根目录下的【.vscode】，会生成一个 tasks.json

【查看】-> 【命令面板】-> 输入【任务:运行生成任务】，也可以使用默认快捷键 Ctrl + Shift + B

tasks.json内容如下：

{
// See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "default",
"args": [],
"isBuildCommand": true,
"isWatching": false,
"problemMatcher": [
"$lessCompile",
"$tsc",
"$jshint"
]
}
]
}


添加 angularjs 和 requirejs

npm install --save -d angular@1.2.32


npm install --save -d requirejs


npm install --save -d angular-ui-router


angular@1.2.32 这里指定了版本，为了兼容IE8而努力

angular-ui-router 习惯使用这个做路由

安装 angularjs 和 requirejs 等相关的 TypeScript definitions

npm install --save-dev @types/angular


npm install --save-dev @types/requirejs


npm install --save-dev @types/jquery


npm install --save-dev @types/angular-ui-router


创建startup.ts文件

'use strict';

require.config({
baseUrl: './',
waitSeconds: 2,
paths: {
'angular': './node_modules/angular/angular',
'angular-ui-router': './node_modules/angular-ui-router/release/angular-ui-router',
},
shim: {
'angular': { exports: 'angular' },
'angular-ui-router': { exports: 'angular-ui-router', deps: ['angular'] },
},
});

require([
'angular',
'app'
], function (angular, app) {
angular.element(document).ready(function () {
angular.bootstrap(document, [app.WebApp.Instance['name']]);
angular.element(document).find('html').addClass('ng-app');
});
});


修改app.ts文件

import angular = require('angular');
import 'angular-ui-router';

export module WebApp {
'use strict';

export const Instance = angular.module('Questionnaire', ['ui.router']);
Instance.config(['$stateProvider', '$urlRouterProvider', ($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider) => {
$stateProvider
.state('home', {
url: '/home',
template: 'Hello Word!',
});

$urlRouterProvider.otherwise('/home');
}]);
}


修改default.htm文件

<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>

<!-- Bootstrap CSS -->
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="./node_modules/html5shiv/dist/html5shiv.js"></script>
<script src="./node_modules/respond.js/dest/respond.min.js"></script>
<![endif]-->
<script src="./node_modules/requirejs/require.js" defer async="true" data-main="startup.js"></script>
</head>

<body>
<div data-ui-view>Loading</div>
</body>

</html>


重新编译后测试成功，显示Hello Word!

调整目录结构为发布做准备

项目开发完成以后，可以考虑三个问题

JS、CSS和HTML的压缩

静态资源的缓存问题，由于浏览器缓存，如果静态资源不做好版本控制将有缓存问题

第三方类库的引用问题，当前引用的都是node_modules目录下的，可以考虑使用公开的CDN

做这些事情前，我们对项目的目录结构做了一些调整，源文件放入src目录，发布的文件放入dist目录，调整后的目录结构如下图

PS：记得相应的调整引用的路径；调整 gulpfile.js 中编译任务的 src 为'src/**/*.ts'，dest为'src'



当前测试访问路径为 http://localhost:8080/src/default.htm#/home，测试通过后继续

静态资源的文件名hash（仅示例JS）

安装所需要的工具

npm install --save-dev -d gulp-rev


npm install --save-dev -d sog-gulp-rev-collector


修改 gulpfile.js 文件，增加一个deploy任务

gulp.task('deploy', [], function (cb) {
var tsProject = ts.createProject('tsconfig.json');

pump([
gulp.src(['src/**/*.ts']),
sourcemaps.init({ loadMaps: true }),
tsProject(),
rev(),
sourcemaps.write('.'),
gulp.dest('dist')
], cb);
});


执行deploy任务

gulp deploy


可以看到在dist目录下生成的js文件都增加了hash码



其余类型的文件可以自己尝试，除了默认的default.htm都需要在文件名中加入hash码

静态资源的压缩（仅示例htm）

安装 gulp-htmlmin

npm install --save-dev -d gulp-htmlmin


调整gulpfile.js文件

gulp.task('deploy-tsc', [], function (cb) {
var tsProject = ts.createProject('tsconfig.json');

pump([
gulp.src(['src/**/*.ts']),
sourcemaps.init({ loadMaps: true }),
tsProject(),
rev(),
sourcemaps.write('.'),
gulp.dest('dist')
], cb);
});

gulp.task('deploy-htm', [], function (cb) {
pump([
gulp.src(['src/**/*.htm']),
htmlmin({
collapseWhitespace: true,
removeComments: true
}),
gulp.dest('dist')
], cb);
});

gulp.task('deploy', ['deploy-htm', 'deploy-tsc']);


其他类型的文件（包括图片等）可以引入不同的工具来完成

替换其他文件中的引用

在对文件名加入hash码的任务中加入生成manifest文件的内容

gulp.task('deploy-tsc', [], function (cb) {
var tsProject = ts.createProject('tsconfig.json');

pump([
gulp.src(['src/**/*.ts']),
sourcemaps.init({ loadMaps: true }),
tsProject(),
rev(),
sourcemaps.write('.'),
gulp.dest('dist'),
rev.manifest('js.json'),
gulp.dest('rev')
], cb);
});


再次执行deploy任务，目录中多了rev文件夹



增加资源替换任务

gulp.task('deploy-replace', ['deploy-htm', 'deploy-tsc'], function (cb) {
pump([
gulp.src(['dist/**/*.htm', 'dist/**/*.js']),
revCollector(['rev/**/*.json']),
gulp.dest('dist')
], cb);
});

gulp.task('deploy', ['deploy-replace', 'deploy-htm', 'deploy-tsc']);


执行完任务后进行测试，访问 http://localhost:8080/dist/default.htm#/home


替换CDN路径

仿照rev目录下的js.json添加manifest.json

{
"../node_modules/bootstrap/dist/css/bootstrap.min.css": "//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.css",
"../node_modules/html5shiv/dist/html5shiv.js": "//cdn.bootcss.com/html5shiv/r29/html5.min.js",
"../node_modules/respond.js/dest/respond.min.js": "//cdn.bootcss.com/respond.js/1.4.2/respond.min.js",
"../node_modules/requirejs/require.js": "//cdn.bootcss.com/require.js/2.3.2/require.min.js",
"../node_modules/angular/angular.js": "//cdn.bootcss.com/angular.js/1.2.32/angular.js",
"../node_modules/angular-ui-router/release/angular-ui-router.js": "//cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.min.js"
}


修改资源替换任务

gulp.task('deploy-replace', ['deploy-htm', 'deploy-tsc'], function (cb) {
pump([
gulp.src(['dist/**/*.htm', 'dist/**/*.js']),
revCollector(['manifest.json', 'rev/**/*.json']),
gulp.dest('dist')
], cb);
});


重新生成后测试如下



提交代码收工

git add .


git commit -m "初始化项目"


完整代码

https://github.com/mayong43111/demo
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航