CODEWITHSUNDEEP
node.jstypescriptvisual-studio-2015angulargulp
Roman Koliada
Roman Koliada

Reputation: 5112

Gulp copy and watch folder with .ts, .scss, .html

I'm starting learning Angular2 with TypeScript using VS 2015 with NPM and Gulp. I have a folder structure like this: 

   scripts
       login
            login.html
            login.scss
            login.ts
       home
            home.html
            home.scss
            home.ts
       app.ts
       boot.ts

I want Gulp to watch the scripts folder, compile files and copy them to another directory. So I want this output:

   wwwroot
           login
                login.html
                login.css
                login.js
           home
                home.html
                home.css
                home.js
           app.js
           boot.js

How can I achieve this? Thanks

Upvotes: 1

Views: 948

Answers (1)

kaxi1993
kaxi1993

Reputation: 4710

Steps how to do it

1) add tsconfig.json in you project root folder with content:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "assets"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

2) install packages:

npm install gulp
npm install gulp-typescript
npm install gulp-sass

3) add gulpfile in root directory with content:

var gulp       = require('gulp');
var typescript = require('gulp-typescript');
var sass       = require('gulp-sass');
var tscConfig  = require('./tsconfig.json');

gulp.task('ts', function () {
    return gulp
        .src('scripts/**/*.ts')
        .pipe(typescript(tscConfig.compilerOptions))
        .pipe(gulp.dest('wwwroot'));
});

gulp.task('html', function() {
    return gulp
        .src('scripts/**/*.html')
        .pipe(gulp.dest('wwwroot'));
});

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

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

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

4) open terminal or cmd change directory to your project folder cd /yourprojectlocation and run gulp

Upvotes: 3

Related Questions