使用gulp的angular 2/4部署文件夹

时间:2017-06-11 08:51:08

标签: angular gulp

我正在构建一个Angular 4应用程序并使用gulp来移动文件。我需要知道什么是分发文件夹的最佳实践或理想的分发文件夹应该是什么样的?我是否需要隔离脚本,html和css。正如您在gulp文件中看到的那样,库将被复制到根目录下的lib文件夹中。

My source folder is as follows

src is the root folder

src\app\

  app.component.ts
  app.module.ts
  app.service.ts
  app.component.html

src\movie\

  movie.component.ts
  movie.module.ts
  movie.service.ts
  movie.component.html

My current distribution folder looks like

Scripts root folder

scripts\app
    app.component.js
    app.module.js

gulp文件

   var ts = require('gulp-typescript');
    var gulp = require('gulp');
    var clean = require('gulp-clean');

    var destPath = './libs/';

    // Delete the dist directory
    gulp.task('clean', function () {
        return gulp.src(destPath)
            .pipe(clean());
    });

    gulp.task("scriptsNStyles", function() {
        gulp.src([
                'core-js/client/*.js',
                'systemjs/dist/*.js',
                'reflect-metadata/*.js',
                'rxjs/**',
                'zone.js/dist/*.js',
                '@angular/**/bundles/*.js',            
                'bootstrap/dist/js/*.js'
        ], {
            cwd: "node_modules/**"
        })
            .pipe(gulp.dest("./libs"));
    });

    var tsProject = ts.createProject('src/tsconfig.json', {
        typescript: require('typescript')
    });

    gulp.task('ts', function (done) {
        //var tsResult = tsProject.src()
        var tsResult = gulp.src([
                "src/app/*.ts"
        ])
            .pipe(tsProject(), undefined, ts.reporter.fullReporter());
        return tsResult.js.pipe(gulp.dest('./Scripts/app/'));
    });

    gulp.task('ts', function (done) {
        //var tsResult = tsProject.src()
        var tsResult = gulp.src([
                "src/*.ts"
        ])
            .pipe(tsProject(), undefined, ts.reporter.fullReporter());
        return tsResult.js.pipe(gulp.dest('./Scripts/'));
    });

    gulp.task('watch', ['watch.ts']);

    gulp.task('watch.ts', ['ts'], function () {
        return gulp.watch('src/app/*.ts', ['ts']);
    });

    gulp.task('watch.ts', ['ts'], function () {
        return gulp.watch('src/*.ts', ['ts']);
    });

    gulp.task('default', ['scriptsNStyles', 'watch']);

0 个答案:

没有答案