Gulp 问题

1、MSB6006

几乎是由于VS编译失败,正常如果机器安装着刚好所需要的CL版本就不会有问题,假如像我这种极端只会有一个VS2015版本的,那就需要指定编译版本。像 gulp-sass 就会有这个问题。我们只需要在安装时加入一个编译版本号即可:

npm install --g gulp-sass --msvs_version=2015

或者

set GYP_MSVS_VERSION=2015

调试Gulp.js任务

虽着我对Gulp的越来越深入,由原来利用很多现成组件(这点多亏npm,几乎你想要的功能都已经有现成的),到现在由于团队越来越大,前后端的分离工作也更清晰,反而Gulp已经成了不可分割工具。我们几乎每个项目都是由npm、brower、gulp来构建的。

当然,刚开始我写的Gulp非常的简单,所以是否调试都是直接依赖 console.log 办法,然而随着团队越来越成熟、项目越来越大,也会变法的去改善Gulp,其目的无非就是让Gulp发挥得更快。

所以开始自己写Node组件来满足构建需求,也成了我工作的一部分。Gulp真的很快,但是如果不善用它会变得很慢。而能否调试Gulp任务,成了影响学习成果的原因,因为只有进入调试我才能看得清楚流程以及更大的优化工作。

Gulp本身就是Node.js,所以我们只需要按照 Node.js 的调试办法来调试我们的 Gulp 任务就行了。

安装 node-inspector

node-inspector 就是node.js的调试工具,而它必须依赖node-gyp,而它又必须先安装python,所以在安装之前必须先安装python。

注:不同平台下它的python版本是有要求

然后安装一个全局的node-inspector。

npm install -g node-inspector

当前安装这家伙未必那么顺利,也许你可能遇到的问题会是:

  • node.js安装版本不符合。
  • 网络问题,正常会收到:Error: connect ETIMEDOUT 的错误。
  • VS Build错误(可能:error msb8020 the build tools for visual studio 2010 (platform toolset = ‘v100’) cannot be found),可以尝试 set GYP_MSVS_VERSION=2013 (假如你的VS是2013的话)

总之安装她会有各种异常,我只能祝你好运。

接着,使用node-debug来调试:

node-debug $(gulp.js文件名) myTask

假设成功的话,会返回:

Node Inspector is now available from http://127.0.0.1:8080/?ws=127.0.0.1:8080&po
rt=5858
Debugging `gulpfile.js`

会自动打开一个Chrome,并进入调试状态。这样的调试如同我们在调试网页的JavaScript脚本一样,诸如:debugger 进入断点,或Chrome的断点,都会被暂停。

Angular2的五分钟入门在Windows下的实现

官网提供的是在linux的步骤,而实际直接拿这些步骤在windows下也可以实现,但唯一就是无法 --watch TypeScript文件,那就是扯蛋,改一下代码就要重新编译,谁受得了。

那么我来尝试一下直接使用Gulp来搭建。

一、创建项目

虽然Angular2允许我们使用TypeScript、Dart、ES5、ES6来写代码,但是出于Angular2也拥抱TypeScript,那么变成我们唯一最好的选择也是TypeScript。

首先创建一个空文件夹,然后通过TSD(什么是TSD见我之前的文章)来安装Angular2包。

tsd install angular2 es6-promise rx rx-lite

接着分别创建 app.ts和index.html 两个空文件。

二、tsc 编译TypeScript

tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts

这是官网提供的命令,意思是说使用 tsc.exe 把 app.ts 编译为ES5标准的JavaScript,其中 –watch 是关键,他可以直接对 app.ts 进行监听,一但app.ts发生变化就立即重新编译。

而正是这一步,在windows下是无法监听的。因此我这里尝试用Gulp来编译TypeScript代码。

三、Gulp 编译TypeScript

首先我们更改一下之前创建的两个文件存放路径,新建立一个 src 文件夹用来存放所有 *.ts 文件。

其次需要安装相应的node组件,采用 gulp-typescript 来编译TypeScript代码。

npm install --save-dev gulp gulp-typescript

最后我们整体的目录结构看起来像这样子:

ng2
├─dist
├─node_modules
├─src
    └─app.ts
├─typings
    ├─angular2
    ├─es6-promise
    └─rx
├─gulpfile.js
├─index.html
├─package.json
└─tsd.json

最后的重点就是 gulpfile.js 配置,这里我写两个Gulp任务,一个是编译、一个是监听。

var gulp = require('gulp'),
    ts = require('gulp-typescript');

// 编译任务
gulp.task('default', function() {
    var tsResult = gulp.src('src/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            module: 'commonjs',
            target: 'ES5' // 按ES5标准输出
        }));

    return tsResult.js.pipe(gulp.dest('dist/'));
});

// 监听任务
gulp.task('watch', ['default'], function() {
    gulp.watch('src/*.ts', ['default']);
});

这样,我们可以直接使用命令 gulp watch 运行gulp,一但我们的 src 文件夹有什么变动,就会立即重新编译,并把结果以 app.js 命名输出在 dist 文件夹中。

四、导入Angular

在 app.ts 里引用 angular2 包,同时这种引用在VS当中还可以起到对angular2的智能提醒作用。

/// <reference path="../typings/angular2/angular2.d.ts" />

:好像这里的path无法使用 / 来表示根目录,只能以 ../ 的形式一点点查。

导入 angular2 的核心模块。

import { Component, View, bootstrap } from 'angular2/angular2';

假设这些代码是在VS下,那么你们还会发现在 Component 上按F12都可以直接跳转到他的所在的文件,不亏是和M$合作,所以如果在VS下开发NG2,体验就不用多说了。

五、定义一个组件

在NG2中,应用基于组件的结构用其来表示UI,以下是创建一个完整的 <my-app> 组件。

// Annotation section
@Component({
  selector: 'my-app'
})

@View({
  template: '<h1>Hello {{ name }}</h1>'
})

// Component controller
class MyAppComponent {
  name: string;
  constructor() {
    this.name = 'Alice';
  }
}

假设你完全没有TypeScript知识的话,那看这一段实时会头疼。

一个Angular2组件包含两部分,用ES6的class来表示组件的Controller(有Angular1.x经验的知道,它是用于组件控制器)和以注解的方式告诉组件应该放在页面的什么地方和什么内容。怎么看都有点像ReactJS。

@Component 和 @View 注解

在Angular2当中会有大量使用TypeScript的注解,也是TypeScript1.5的一个新功能,它是将额外的数据附加到类当中,相当于配置元数据,就拿上面的来说,@Component 它把界面上某个DOM元素选择器关联起来,以便于Angular知道应该把结果插入到哪?熟悉1.x的人知道,当插入组件到页面时也会一并产生一个的注释代码,而在2.x里面就没有这些。

此外注解其实也有可能出现在ES7的标准当中。在VS IDE下是允许被智能感知的,开发起来杠杠的。

六、Bootstrap

在1.x当中我们启动一个Angular程序有两种方式 ng-app=""angular.bootstrap(),在2.x中只能用后者。我们在 app.ts 最底部加上:

bootstrap(MyAppComponent);

七、定义HTML

<!-- index.html -->
<html>

<head>
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
</head>

<body>
    <!-- The app component created in app.ts -->
    <my-app></my-app>
    <script>System.import('dist/app');</script>
</body>

</html>

其中引用了 traceur-runtime.js 和 angular2.dev.js,前者是ES6编译器,后者是angular核心包,而 system.js 就是个万能的模块加载器(就像require.js一样)。

八、运行

需要有一个HTTP服务,来运行我们的angular2。这里直接使用 npm install -g http-server 安装,最后:

http-server

在浏览器里访问 http://localhost:8080/ 就可以看到:

ng2-5-min

喔,对于,如果你想正确的运行还需要开个VPN,因为上面引用的库都是直接国外的。!@#¥%……&*()…………

这是我完整的代码,下载后按第8步安装 http-server 运行即可。

gulp中文乱码问题

问题原先是要动态对 cshtml 文件进行插入JavaScript代码,而正好这个 cshtml 文件有中文,所以才发现原来默认 Gulp 在保存UTF-8文件是采用无BOM,倒置所有的文档里的中文全都成了乱码。

当然知道原因,那么也就很简单,先安装 Gulp-bom

npm install --save-dev gulp-bom
var gulp = require('gulp');
var bom = require('gulp-bom');


gulp.task('default', function () {
    return gulp.src('_Layout.cshtml')
        .pipe(bom())
        .pipe(gulp.dest('dist'));
});

© 2017 卡片机色彩 沪ICP备13032872号-3

Theme by cipchk

to top