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

环境

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。

新建一个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配置生成任务

【查看】-> 【命令面板】-> 输入【任务:配置任务运行程序】（保留前面的 >）
选择 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.

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'

新建一个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

秒客网

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

环境

准备工具

需求

步骤开始：

执行命令行工具

启动Visual Studio Code

编辑package.json文件

创建一个Git本地仓库

创建 README.md

通过NPM安装bootstrap及相关依赖

创建默认页面

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

安装http-server

启动web服务进行验证

安装typescript

添加app.ts文件并编辑

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

添加tsconfig.json配置

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

安装 gulp 和 gulp-typescript 用于编译

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

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

Visual Studio Code配置生成任务

添加 angularjs 和 requirejs

安装 angularjs 和 requirejs 等相关的 TypeScript definitions

创建startup.ts文件

修改app.ts文件

修改default.htm文件

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

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

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

替换其他文件中的引用

替换CDN路径

提交代码收工

完整代码

相关文章