Visual Studio Code 应用 BrowserSync

Atals前端采用gulp构建，今天试了下BrowserSync,真是一个爽，sass,typescript编译替换一气喝成。

gulp配置

gulpfile.js

var gulp = require('gulp');
var ts = require('gulp-typescript');
var merge = require('merge2');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('browser-sync', function() {
    var files = [
        '*.html',
        '*.ts',
        '*.scss'
    ];

    browserSync.init(files, {
      // baseDir: 'Learning',
        server: "./"
    });
    gulp.watch('*.ts', ['scripts']);
    gulp.watch('*.scss', ['sass']);
    gulp.watch('*.scss').on('change', reload);
});

gulp.task('scripts', function() {
    var tsResult = gulp.src('*.ts')
        .pipe(ts({
            declarationFiles: true,
            noExternalResolve: true,
            noImplicitAny: true,
            out: 'main.js'
        }));

return merge([
    tsResult.dts.pipe(gulp.dest('release/definitions')),
    tsResult.js.pipe(gulp.dest('release/js'))
]);
});

gulp.task('sass', function() {
    gulp.src('*.scss')
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
    gulp.watch('*.scss', ['sass']);
    gulp.watch('*.ts', ['scripts']);
});

Visual Studio Code

.vscode
|—— 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": "scripts",
			"isBuildCommand": true,
			"showOutput": "always"
		},
		{
			"taskName": "sass",
			"isBuildCommand": true,
			"showOutput": "always"
		},
		{
			"taskName": "watch",
			"isBuildCommand": true,
			"showOutput": "always"
		},
		{
			"taskName": "browser-sync",
			"isBuildCommand": true,
			"showOutput": "always"
		}
    ]
}