使用browserify

时间:2018-02-04 11:54:04

标签: typescript gulp browserify

我有一个gulpfile.js,内容如下:



let gulp = require('gulp');
//let tslint = require('gulp-tslint');
let ts = require('gulp-typescript');
let browserify = require('browserify');
let transform = require('vinyl-transform');
let uglify = require('gulp-uglify');
let sourcemaps = require('gulp-sourcemaps');
let runSequence = require('run-sequence');
let karma = require('gulp-karma');
let browserSync = require('browser-sync');

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
});

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

let browserified = transform((filename) => {
    let b = browserify({entries: filename, debug: true});
    return b.bundle();
});

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

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

gulp.task('tsc', () => {
    return gulp.src('./source/ts/**/**.ts')
                .pipe(tsProject())
                .js.pipe(gulp.dest('./temp/source/js'));
});

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

gulp.task('karma', (cb) => {
    gulp.src('./dist/test/**/**.test.js')
        .pipe(karma({
            configFile: 'karma.conf.js',
            action: 'run'
        }))
        .on('end', cb)
        .on('error', (err) => {
            throw err;
        });
});

gulp.task('bundle', (cb) => {
    runSequence([
        'bundle-js'], cb);
});

gulp.task('test', function(cb) {
    runSequence('bundle',['karma'],cb);
});

gulp.task('browser-sync', ['test'], () => {
    browserSync({
        server: {
            baseDir: "./dist"
        }
    });

    return gulp.watch([
        "./dist/source/js/**/*.js",
        "./dist/source/css/**.css",
        "./dist/test/**/**.test.js",
        "./dist/data/**/**",
        "./index.html"
    ], [browserSync.reload]);
});

gulp.task('default', (cb) => {
    runSequence(
        ['tsc','tsc-tests'],
        ['browser-sync'],
        cb
    );
});




当我在bundle-js任务中运行gulp命令时,dest.write不是函数错误弹出。

以下是我的package.json文件:



{
  "name": "typescriptbookexamples",
  "version": "1.0.0",
  "description": "TypeScript Example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "taskrunner": "gulp"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/abhilashdk2016/TypeScriptBookExamples.git"
  },
  "keywords": [
    "TypeScript",
    "Gulp",
    "TS"
  ],
  "author": "Abhilash D K",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/abhilashdk2016/TypeScriptBookExamples/issues"
  },
  "homepage": "https://github.com/abhilashdk2016/TypeScriptBookExamples#readme",
  "devDependencies": {
    "browser-sync": "^2.23.6",
    "browserify": "^15.2.0",
    "chai": "^4.1.2",
    "gulp": "^3.9.1",
    "gulp-karma": "0.0.5",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-tslint": "^8.1.2",
    "gulp-typescript": "^3.2.4",
    "gulp-uglify": "^3.0.0",
    "jasmine": "^2.9.0",
    "karma": "^2.0.0",
    "karma-chai": "^0.1.0",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-sinon": "^1.0.5",
    "mocha": "^5.0.0",
    "run-sequence": "^2.2.1",
    "sinon": "^4.2.2",
    "vinyl-transform": "^1.0.0"
  },
  "dependencies": {
    "@types/bootstrap": "^3.3.37",
    "@types/jasmine": "^2.8.6",
    "@types/jquery": "^3.3.0",
    "@types/node": "^9.4.0",
    "@types/typescript": "^2.0.0",
    "bootstrap": "^4.0.0",
    "jquery": "^3.3.1",
    "tether": "^1.4.3",
    "typescript": "^2.7.1"
  }
}




我已经评论过let tslint = require(' gulp-tslint')这一行。取消注释此行后我得到的错误是

错误:无法找到模块' tslint'

我正在关注Packt发布的TypeScript Modren JavaScript开发手册。任何人都可以告诉我这个错误的原因以及我应该做些什么来执行gulp文件。

先谢谢。

0 个答案:

没有答案