76 lines
1.8 KiB
JavaScript
76 lines
1.8 KiB
JavaScript
const gulp = require('gulp');
|
|
const pump = require('pump');
|
|
|
|
const browserify = require('browserify');
|
|
const babel = require('gulp-babel');
|
|
const uglify = require('gulp-uglify');
|
|
const source = require('vinyl-source-stream');
|
|
const sass = require('gulp-sass');
|
|
const autoprefixer = require('gulp-autoprefixer');
|
|
const cleanCSS = require('gulp-clean-css');
|
|
const rename = require('gulp-rename');
|
|
const replace = require('gulp-replace');
|
|
|
|
// Browserify
|
|
gulp.task('browserify', cb => {
|
|
pump([
|
|
browserify('js/vanity.js', {standalone: 'vanity'}).bundle(),
|
|
source('bundle.js'),
|
|
gulp.dest('js')
|
|
], cb);
|
|
});
|
|
|
|
// SASS
|
|
gulp.task('sass', cb => {
|
|
pump([
|
|
gulp.src('css/stylesheet.sass'),
|
|
sass().on('error', sass.logError),
|
|
gulp.dest('css')
|
|
], cb);
|
|
});
|
|
|
|
// Build javascript
|
|
gulp.task('build-js', ['browserify'], cb => {
|
|
pump([
|
|
gulp.src(['js/index.js', 'js/bundle.js']),
|
|
babel({presets: ['env'], plugins: ['@babel/plugin-transform-object-assign']}),
|
|
uglify(),
|
|
rename({extname: '.min.js'}),
|
|
gulp.dest('build/js')
|
|
], cb);
|
|
});
|
|
|
|
// Build CSS
|
|
gulp.task('build-css', ['sass'], cb => {
|
|
pump([
|
|
gulp.src('css/stylesheet.css'),
|
|
autoprefixer({
|
|
browsers: ['last 2 versions'],
|
|
remove: false,
|
|
cascade: false
|
|
}),
|
|
cleanCSS({compatibility: 'ie8'}),
|
|
rename({extname: '.min.css'}),
|
|
gulp.dest('build/css')
|
|
], cb);
|
|
});
|
|
|
|
gulp.task('replace-path', cb => {
|
|
pump([
|
|
gulp.src('index.html'),
|
|
replace('src="js/', 'src="build/js/'),
|
|
replace('.js', '.min.js'),
|
|
replace('href="css/', 'href="build/css/'),
|
|
replace('.css', '.min.css'),
|
|
gulp.dest('./')
|
|
], cb);
|
|
});
|
|
|
|
// Build app
|
|
gulp.task('build', ['build-js', 'build-css', 'replace-path']);
|
|
|
|
// Watch changes and compile on the fly
|
|
gulp.task('watch', () => {
|
|
gulp.watch(['js/vanity.js'], ['browserify']);
|
|
gulp.watch(['css/stylesheet.sass'], ['sass']);
|
|
});
|