var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var tsc = require('gulp-typescript');
var tslint = require('gulp-tslint');
var tsProject = tsc.createProject('tsconfig.json');
var config = require('./gulp.config')();
var browserSync = require('browser-sync').create();
var superstatic = require('superstatic');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
/*
-- TOP LEVEL FUNCTIONS --
gulp.task - Define tasks
gulp.src - point to files to use
gulp.dest - point to folder to output
gulp.watch - watch files + folders for changes
*/
// Logs Message
gulp.task('message', function(){
return console.log('Gulp is running...');
});
gulp.task('ts-lint', function() {
console.log('ts-lint task running...');
return gulp.src(config.allTs)
.pipe(tslint())
.pipe(tslint({
formatter: "verbose"
}))
// .pipe(tslint.report("verbose"))
})
gulp.task('compile-ts', function() {
console.log('compile-ts task running...');
var sourceTsFiles = [
config.allTs,
config.typings
];
var tsResult = gulp
.src(sourceTsFiles)
.pipe(sourcemaps.init())
.pipe(tsProject())
return tsResult.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(config.tsOutputPath));
});
gulp.task('sass', function(){
console.log('sass is running...');
// return gulp.src('src/app/styles.scss')
return gulp.src('src/app/**/*.scss')
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('src/app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function() {
console.log('browserSync is running...');
browserSync.init({
// port: 4200,
// file: ['index.html', '**/*.js'],
// injectChanges: true,
// logFileChanges: true,
// logLevel: 'verbose',
// notify: true,
// reloadDelay: 0,
server: {
baseDir: 'src',
middleware: superstatic({debug: false})
},
})
})
gulp.task('watch', ['browserSync', 'sass'], function(){
gulp.watch('src/app/**/*.scss', ['sass']);
gulp.watch('src/app/component/**/*.scss', ['sass']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('src/app/**/*.html', browserSync.reload);
gulp.watch('src/app/component/**/*.html', browserSync.reload);
gulp.watch('src/app/**/*.js', browserSync.reload);
gulp.watch('src/app/component/**/*.js', browserSync.reload);
gulp.watch('src/*.html', browserSync.reload);
})
gulp.task('useref', function() {
var assets = useref.assets();
return gulp.src('app/*.html')
.pipe(assets)
.pipe(gulpIf('*.css', minifyCSS()))
.pipe(gulpIf('*.js', uglify()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist'))
});
gulp.task('images', function() {
return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
.pipe(cache(imagemin( {
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
});
gulp.task('fonts', function() {
return gulp.src('app/fonts/**/*')
.pipe(gulp.dest('dist/fonts'))
});
// Cleaning
gulp.task('clean', function(callback) {
del('dist');
return cache.clearAll(callback);
})
gulp.task('clean:dist', function(callback) {
del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
});
// Build Sequences
gulp.task('build', function (callback) {
runSequence('clean:dist',
['sass', 'useref', 'images', 'fonts'],
callback
)
})
gulp.task('default', function (callback) {
runSequence(['message', 'ts-lint', 'sass', 'browserSync', 'watch'],
callback
)
})
