Learning TypeScript 0x1 自动化工作流程

Gulp

初始化

npm init -y

编译依赖

npm i gulp-typescript --save-dev

全局安装

npm i -g gulp

开发依赖

npm i --save-dev gulp

测试

// gulpfile.js
var gulp = require('gulp')

gulp.task('default', function() {
  console.log('Hello Gulp!')
})

TypeScript

检查TS代码质量

npm i gulp-tslint --save-dev

// gulpfile.js
const gulp = require('gulp')
const tslint = require('gulp-tslint')

gulp.task('default', ['lint'])
gulp.task('lint', () => {
  return gulp.src([
    './src/ts/**/**.ts', './test/**/**.test.ts'
  ]).pipe(tslint())
    .pipe(tslint.report('verbose'))
})

 编译TS

// gulpfile.js
const gulp = require('gulp')
const tslint = require('gulp-tslint')
const ts = require('gulp-typescript')


gulp.task('default', ['lint', 'tsc', 'tsc-tests'])
gulp.task('lint', () => {
  return gulp.src([
    './src/ts/**/**.ts', './test/**/**.test.ts'
  ]).pipe(tslint())
    .pipe(tslint.report('verbose'))
})

const tsProject = ts.createProject({
  removeComments: true,
  noImplicitAny: true,
  target: 'ES3',
  module: 'commonjs',
  declarationFiles: false
})
gulp.task('tsc', () => {
  return gulp.src('./src/ts/**/**.ts')
            .pipe(ts(tsProject))
            .js.pipe(gulp.dest('./temp/src/js'))
})

const tsTestProject = ts.createProject({
  removeComments: true,
  noImplicitAny: true,
  target: 'ES3',
  module: 'commonjs',
  declarationFiles: false
})

gulp.task('tsc-tests', () => {
  return gulp.src('./test/**/**.test.ts')
            .pipe(ts(tsTestProject))
            .js.pipe(gulp.dest('./temp/test/'))
})

优化TS应用

将TS的模块参数配置成CommonJS，使用Browserify生产具有应用里所有模块且高度优化的JS文件.

npm i browserify vinyl-transform gulp-uglify gulp-sourcemaps

// gulpfile.js
const gulp = require('gulp')
const tslint = require('gulp-tslint')
const ts = require('gulp-typescript')

const browserify = require('browserify')
const transform = require('vinyl-transform')
const uglify = require('gulp-uglify')
const sourcemaps = require('gulp-sourcemaps')


gulp.task('default', ['lint', 'tsc', 'tsc-tests', 'bundle-js', 'bundle-test'])
/*...*/
const browserified = transform((filename) => {
  const b = browserify({
    entries: filename,
    debug: true
  })
  return b.bundle()
})

gulp.task('bundle-js', () => {
  return gulp.src('./temp/src/js/main.js')
            .pipe(browserified)
            .pipe(sourcemaps.init({ loadMaps: true }))
            .pipe(uglify())
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest('./dist/src/js/'))
})

gulp.task('bundle-test', () => {
  return gulp.src('./temp/test/**/**.test.js')
            .pipe(browserified)
            .pipe(gulp.dest('./dist/test/'))
})

管理Gulp任务的执行任务顺序

让一个任务同步执行：

• 传递一个回调函数
• 返回一个流
• 返回一个Promise

// 传递一个回调函数
gulp.task('sync', (cb) => {
    setTimeout(()={
        cb()
    }, 1000)
})
// 返回一个流
gulp.task('sync', () => {
    return gulp.src('js/*.js')
            .pipe(concat('script.min.js')
            .pipe(uglify())
            .pipe(gulp.dest('../dist/js')
})

// 将同步的任务加入任务依赖，来管理执行顺序
gulp.task('secondTask', ['sync'], () => {
    // 这个任务在sync任务完成前不会执行
}

假设现有第三个任务thirdTask，希望default在sync和thirdTask都完成后再执行，sync和thirdTask同步并行执行

gulp.task('default', ['sync', 'thirdTask'], () => {
    //default的内容
}

使用run-sequence

const runSequence = require('run-sequence')
gulp.task('default', cb => {
    runSequence(
        'lint',
        ['tsc', 'tsc-test'],
        ['bundle-js', 'bundle-test'],
        'karma',
        'browser-sync',
        cb
        )
})

自动化测试工具

npm i mocha chai sinon --save-dev
npm i karma karma-mocha karma-chai karma-sinon karma-coverage karma-phantomjs-launcher gulp-karma --save-dev

const karma = require('gulp-karma')
gulp.task('karma', cb => {
  gulp.src('./dist/test/**/**.test.js')
    .pipe(karma({
      configFile: 'karma.conf.js',
      action: 'run'
    }))
    .on('end', cb)
    .on('error', err => {
      // 确保测试失败后让gulp以非0状态码退出
      throw err
    })
})

karma.config.js 

module.exports = function (config) {
  'use strict',
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai', 'sinon'],
    browsers: ['PhantomJS'],
    reporters: ['progress', 'coverage'],
    plugins: [
      'karma-coverage',
      'karma-mocha',
      'karma-chai',
      'karma-sinon',
      'karma-phantomjs-launcher'
    ],
    preprocessors: {
      './dist/test/*.test.js': ['coverage']
    },
    port: 9876,
    colors: true,
    autoWatch: false,
    singleRun: false,
    logLevel: config,LOG_INFO
  })
}

使跨设备测试同步

npm i -g browser-sync

// 任务合并
gulp.task('bundle', cb => {
  runSequence('build', [
    'bundle-js', 'bundle-test'
  ], cb)
})
gulp.task('test', cb => {
  runSequence('bundle', ['karma'], cb)
})
const browserSync = require('browser-sync')
gulp.task('browser-sync', ['test'], () => {
  browserSync({
    server: {
      baseDir: './dist'
    }
  })
  return gulp.watch([
    './dist/src/js/**/*.js',
    './dist/src/css/*.css',
    './dist/test/**/*.test.js',
    './dist/data/**/**',
    './index.html'
  ], [browserSync.reload])
})

持续集成工具

 

手脚架工具