Visual studio code 前端自动化构建(glup)

  • 发布日期:2016年7月10日
  • 新闻类别: HTML5/CSS3/JS
  • 查看:898

Visual studio code 是微软推出的轻量型跨平台的开发工具,定制性很高,也很好用,下面是我根据自己的情况,搜集整理的一些前端配置

.vscode 文件夹下添加 tasks.json 文件,内容如下:

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

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


// Less configuration
var 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模块。基本上就可以开发了