设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 1292|回复: 0

[经验分享] 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目

[复制链接]
89ou

尚未签到
发表于 2018-1-14 11:10:30 | 显示全部楼层 |阅读模式
环境
　　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">　　

　　
<!-- 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>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">　　

　　
<!-- 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>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">　　

　　
<!-- 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

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-434964-1-1.html 上篇帖子： 如何让git小乌龟工具TortoiseGit记住你的账号密码 下篇帖子： [macOS] keychain的跳坑之旅！git拉取的权限问题
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


提醒：禁止发布任何违反国家法律、法规的言论与图片等内容；本站内容均来自个人观点与网络等信息，非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表