Question

我有以下gulpfile.js：

let browserify = require('browserify');
let browserSync = require('browser-sync');
let concat = require('gulp-concat');
let buffer = require('vinyl-buffer');
let gulp = require('gulp');
const jasmineBrowser = require('gulp-jasmine-browser');
let karma = require('gulp-karma');
let transform = require('vinyl-transform');
let uglify = require('gulp-uglify');
let sourcemaps = require('gulp-sourcemaps');
let runSequence = require('run-sequence');
let ts = require('gulp-typescript');
//let tslint = require('gulp-tslint');
let tsify = require('tsify');
let sass = require('gulp-sass');
let source = require('vinyl-source-stream');

const PATHS = {
    bundleJSMainFile: './temp/src/js/app.js',
    bundleTestMainFile: ['./temp/test/js/main.test.js'],
    tsFiles: './src/ts/**/**.ts',
    tsTestFiles: './test/**/**.test.ts',
    bundleJSOutDir: './dist/src/',
    bundleTestOutDir: './dist/test/',
    tsTempDir:'./temp/src/js',
    tsTempTestDir:'./temp/test/js',
    cssFiles: './css/css/*.css',
    cssTempFiles: './temp/css/*.css',
    scssFiles: './css/scss/*.scss',
    imageFiles: './images/*.{jpg,png,gif,JPG,PNG,GIF}',
    cssTempDir: './temp/css',
    stylesOutDir: './dist/css/'
}

let tsProject = ts.createProject({
    removeComments: true,
    noImplicitAny: true,
    target: 'ES5',
    module: 'commonjs',
    declarationFiles: false
});
let tsTestProject = ts.createProject({
    removeComments: true,
    noImplicitAny: true,
    target: 'ES5',
    module: 'commonjs',
    declarationFiles: false
});

//Process Plain Css
gulp.task('css', () => {
    return gulp.src(PATHS.cssFiles)
           .pipe(gulp.dest(PATHS.cssTempDir));
})

//Process SCSS
gulp.task('sass', () => {
    return gulp.src(PATHS.scssFiles)
           .pipe(sass())
           .pipe(gulp.dest(PATHS.cssTempDir));
});

//Bundle CSS Files
gulp.task('bundle:css', () => {
    return gulp.src(PATHS.cssTempFiles)
               .pipe(concat('app.css'))
               .pipe(gulp.dest(PATHS.stylesOutDir));
});

gulp.task('tsc', () => {
    return gulp.src(PATHS.tsFiles)
                .pipe(tsProject())
                .js.pipe(gulp.dest(PATHS.tsTempDir));
});

gulp.task('tsc:tests', () => {
    return gulp.src(PATHS.tsTestFiles)
                .pipe(tsTestProject())
                .js.pipe(gulp.dest(PATHS.tsTempTestDir));
});

gulp.task('bundle:js', function () {
    // transform regular node stream to gulp (buffered vinyl) stream
    var b = browserify({ entries: PATHS.bundleJSMainFile, debug: true });
  
    return b.bundle()
               .pipe(source('bundle.js'))
               .pipe(buffer())
               .pipe(uglify())
               .pipe(gulp.dest(PATHS.bundleJSOutDir));

    /*return browserify({
        debug:true,
        entries: ['./src/ts/app.ts'],
        basedir: '.',
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist/src/js'));*/
  });

gulp.task('bundle:test', function () {
    var b = browserify({ entries: PATHS.bundleTestMainFile, debug: true });
    return b.bundle()
            .pipe(source('bundle.test.js'))
            .pipe(buffer())
            .pipe(uglify())
            .pipe(gulp.dest(PATHS.bundleTestOutDir));
});
  
gulp.task('watch:ts', () => {
    gulp.watch(PATHS.tsFiles, ['tsc','bundle:js', browserSync.reload]);
    gulp.watch(PATHS.tsTestFiles, ['tsc:tests','bundle:test', browserSync.reload]);
});

gulp.task('watch:css', () => {
    gulp.watch(PATHS.scssFiles, ['sass','bundle:css', browserSync.reload]);
    gulp.watch(PATHS.cssFiles, ['css','bundle:css', browserSync.reload]);
});

// gulp.task('bundle', (cb) => {
//     runSequence([
//         'bundle:js','bundle:test'], cb);
// });

gulp.task('browser-sync', () => {
    browserSync.init({
        server: {
            baseDir: "./dist"
        }
    });
    // return gulp.watch([
    //     "./dist/src/**/*.js",
    //     "./dist/src/css/*.css",
    //     "./dist/test/**.test.js",
    //     "./dist/data/**/**",
    //     "./index.html"
    // ], [browserSync.reload]);
});

gulp.task("copy:html", function () {
    return gulp.src("./*html")
        .pipe(gulp.dest("dist"));
});

gulp.task('default', () =>{
    runSequence(
        ['bundle:css'],
        ['tsc','tsc:tests'],
        ['watch:css','watch:ts'],
        ['browser-sync'],
        'copy:html'
    );
});

gulp.task('run:jasmine', () => {
    gulp.src(['', 'dist/test/bundle.test.js'])
        .pipe(jasmineBrowser.specRunner())
        .pipe(jasmineBrowser.server({ port: 8888 }));
});

当我第一次跑步时，一切都很好。但是当我在任务监视器中更改TypeScript文件中的某些内容时：ts只有tsc和bundle：js任务应该运行，并且浏览器同步正在监视它应该重新加载的所有bundle.js文件。

但是当我更改任何.ts文件时，我得到的输出如下所示。

[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.56.1:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.56.1:3001
 -------------------------------------
[Browsersync] Serving files from: ./dist
[12:23:56] Starting 'bundle:js'...
[12:23:56] Starting 'tsc'...
[12:23:58] Finished 'tsc' after 1.35 s
[12:23:58] Finished 'bundle:js' after 1.38 s
[12:23:58] Starting 'tsc'...
[12:23:58] Starting 'tsc:tests'...
[12:23:58] Starting 'watch:ts'...
[12:23:58] Finished 'watch:ts' after 2.77 ms
[12:23:58] Starting 'bundle:js'...
[12:23:58] Starting 'bundle:test'...
[12:23:58] Starting 'bundle'...
[12:23:58] Starting 'copy:html'...
[12:23:58] Starting 'default'...
[12:23:58] Starting 'run:jasmine'...
[12:23:58] Finished 'run:jasmine' after 15 ms
[12:23:58] Finished 'default' after 16 ms
[12:23:58] Jasmine server listening on port 8888
[12:24:00] Finished 'tsc:tests' after 2.27 s
[12:24:00] Finished 'copy:html' after 2.26 s
[12:24:00] Finished 'tsc' after 2.29 s
[12:24:00] Starting 'watch:ts'...
[12:24:00] Finished 'watch:ts' after 2.95 ms
[12:24:00] Finished 'bundle:test' after 2.34 s
[12:24:00] Finished 'bundle:js' after 2.37 s
[12:24:00] Finished 'bundle' after 2.37 s
[12:24:00] Starting 'browser-sync'...
[error] You tried to start Browsersync twice! To create multiple instances, use browserSync.create().init()
[12:24:00] Finished 'browser-sync' after 17 ms
[12:24:00] Starting 'copy:html'...
[12:24:00] Finished 'copy:html' after 3.8 ms
[12:24:00] Starting 'tsc'...
[12:24:00] Starting 'tsc:tests'...
[12:24:00] Starting 'watch:ts'...
[12:24:00] Finished 'watch:ts' after 3.58 ms
[12:24:00] Starting 'bundle:js'...
[12:24:00] Starting 'bundle:test'...
[12:24:00] Starting 'bundle'...
[12:24:00] Starting 'copy:html'...
[12:24:00] Starting 'default'...
[12:24:00] Starting 'run:jasmine'...
[12:24:00] Finished 'run:jasmine' after 7.1 ms
[12:24:00] Finished 'default' after 10 ms
events.js:182
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::8888

[错误]您尝试两次启动Browsersync！要创建多个实例，请使用browserSync.create（）。init（） - ＆gt;请任何人都可以指导我如何解决此错误。

我看到默认任务也被调用了。是browserSync.reload调用默认任务。

此外，我没有在任何地方调用run：jasmine任务，但仍在调用它。那是为什么？

我的项目结构如下：

提前致谢：）

Gulp，TypeScript，Jasmine，browserSync协调

0 个答案: