wickywills
4/9/2018 - 11:25 AM

Gulp, Stylus, Browsersync, JS Uglify

Just a quick file to get things going with Gulp and Stylus

// Include gulp
var gulp    = require('gulp');
var nib     = require('nib');

// Include Our Plugins
var jshint      = require('gulp-jshint');
var concat      = require('gulp-concat');
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');
var stylus      = require('gulp-stylus');
var browserSync = require('browser-sync').create();

// Lint Task
gulp.task('lint', function() {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('js/*.js', ['lint', 'scripts']);
    gulp.watch('css/**/*.styl', ['stylus']);
    gulp.watch('./**/*.php', browserSync.reload);
    gulp.watch('css/**/*.styl', browserSync.reload);
});

// Include css
gulp.task('stylus', function() {
    return gulp.src('./css/**/*.styl')
        .pipe(stylus({
            'include css': true,
            'use': nib(),
            'compress': true
        }))
        .pipe(gulp.dest('./dist/css'));
});

// Browsersync
gulp.task('browser-sync', function() {
    dev: {
        browserSync.init({
            proxy: "endlesschapter.localtest"
        });
    }
});

// Default Task
gulp.task('default', ['lint', 'stylus', 'scripts', 'browser-sync', 'watch']);
gulp.task('dev', ['lint', 'stylus', 'scripts', 'browser-sync', 'watch']);