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

时间:2024-09-11 12:07:32

环境

windows 10

准备工具

  1. Visual Studio Code
  2. Node.js
  3. 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。

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

安装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

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

安装 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配置生成任务

  1. 【查看】-> 【命令面板】-> 输入【任务:配置任务运行程序】(保留前面的 >)
  2. 选择 gulp, 在工作空间的根目录下的【.vscode】,会生成一个 tasks.json
  3. 【查看】-> 【命令面板】-> 输入【任务:运行生成任务】,也可以使用默认快捷键 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.
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!

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

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

  1. JS、CSS和HTML的压缩
  2. 静态资源的缓存问题,由于浏览器缓存,如果静态资源不做好版本控制将有缓存问题
  3. 第三方类库的引用问题,当前引用的都是node_modules目录下的,可以考虑使用公开的CDN

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

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

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

当前测试访问路径为 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码

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

其余类型的文件可以自己尝试,除了默认的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文件夹

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

增加资源替换任务

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

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

替换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);
});

重新生成后测试如下

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

提交代码收工

git add .
git commit -m "初始化项目"

完整代码

https://github.com/mayong43111/demo