Visual studio code前端自动化构建glup

Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。

glup前端配置：

.VS Code 文件夹下添加 tasks.json 文件，内容如下：

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            "isBuildCommand": true,
            "showOutput": "always",
            "isWatching": true,
            "problemMatcher": "$tsc"        }
    ]
}

在项目根目录下创建glupfile.js文件，配制如下：

// Less configurationvar gulp = require('gulp');var less = require('gulp-less');var sass = require('gulp-sass');var sourcemaps = require("gulp-sourcemaps");var concat = require("gulp-concat");var ts = require('gulp-typescript');const tsProject = ts.createProject("tsconfig.json");
gulp.task('less', function() {
    gulp.src('./AdminHTML/Content/**/css/*.less')
        .pipe(less())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }))
});

gulp.task('sass', function() {
    gulp.src('*.scss')
        .pipe(sass())
        .pipe(gulp.dest(function(f) {
            return f.base;
        }))
});


gulp.task('typescript', function() {
  return gulp.src("scripts/src/**/*.ts")
    .pipe(sourcemaps.init())
    .pipe(ts(tsProject))
 // .pipe(concat("app.js")) .pipe(sourcemaps.write("."))
 .pipe(gulp.dest("scripts/dist/"));
});  

gulp.task('default', ['less','sass','typescript'], function() {
    gulp.watch('./AdminHTML/Content/**/css/*.less', ['less']);
    gulp.watch('*.scss', ['sass']);
    gulp.watch('scripts/src/**/*.ts', ['typescript']);
})

配制了Less，sass, typescript自动化编译。

接着根目录下创建 tsconfig.json 文件，内容如下：

{

  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false  },

  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"  ]
}

接着相应的用到的node模块。