var gulp = require('gulp');
var browserify = require('browserify');
var notify = require('gulp-notify');
var source = require('vinyl-source-stream');
var watchify = require('watchify');
var plumber = require('gulp-plumber');
var less = require('gulp-less');
var csso = require('gulp-csso');
var watch = require('gulp-watch');
var envify = require('envify');
var reactify = require('reactify');
var uglifyify = require('uglifyify');
var nodemon = require('nodemon');
var browserSync = require('browser-sync');
var gutil = require('gulp-util');
var bust = require('gulp-buster');
var uglify = require('gulp-uglify');
var gStreamify = require('gulp-streamify');
var imagemin = require('gulp-imagemin');
var jshint = require('gulp-jshint');
var react = require('gulp-react');
var csslint = require('gulp-csslint');
var prefix = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var streamqueue = require('streamqueue');
var openWebpage = require('open');
var svgmin = require('gulp-svgmin');
var production = process.env.NODE_ENV === 'production';
function handleError(task) {
return function(err) {
gutil.log(gutil.colors.red(err));
notify.onError(task + ' failed, check the logs..')(err);
};
}
function wufoo() {
return gulp.src('./src/less/wufoo.less')
.pipe(plumber())
.pipe(less().on('error', handleError('Less')))
.pipe(prefix())
.pipe(csso())
.pipe(gulp.dest('assets/css'));
}
function styles() {
var stream = gulp.src('./src/less/app.less')
.pipe(plumber())
.pipe(less().on('error', handleError('Less')))
.pipe(prefix())
.pipe(csslint({
'box-sizing': false,
'universal-selector': false,
'box-model': false,
'overqualified-elements': false,
'compatible-vendor-prefixes': false,
'qualified-headings': false,
'unique-headings': false,
'font-sizes': false,
'adjoining-classes': false
}))
.pipe(csslint.reporter(function(file) {
if(!file.csslint.success) {
handleError('csslint')(
'There were ' + file.csslint.errorCount + ' css linting errors');
file.csslint.results.forEach(function(result) {
gutil.log(gutil.colors.red('[csslint] ' + result.error.message+' on line '+result.error.line));
});
}
}));
var combined = streamqueue(
{ objectMode: true },
gulp.src('./node_modules/normalize.css/normalize.css'),
stream)
.pipe(concat('app.css'));
if(production) {
combined.pipe(csso());
}
return combined
.pipe(gulp.dest('assets/css'));
}
function lintScripts() {
return gulp.src('./src/**/*.js')
.pipe(react())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(jshint.reporter('fail'))
.on('error', handleError('jshint'));
}
function scripts(watch) {
var bundler, rebundle;
bundler = browserify({
basedir: __dirname,
debug: !production,
entries: './src/client.js',
cache: {},
packageCache: {},
fullPaths: watch
});
if(watch) {
bundler = watchify(bundler);
}
bundler.transform(reactify);
bundler.transform({global: true}, envify);
if(production) {
bundler.transform({global: true}, uglifyify);
}
rebundle = function() {
var stream = bundler.bundle();
stream.on('error', handleError('Browserify'));
stream = stream.pipe(source('bundle.js'));
if(production) {
stream.pipe(gStreamify(uglify()));
}
return stream.pipe(gulp.dest('./assets/js'));
};
bundler.on('update', rebundle);
return rebundle();
}
function images() {
return gulp.src('./src/images/*')
.pipe(gStreamify(imagemin()))
.pipe(gulp.dest('./assets/images'));
}
function startBrowserSync() {
browserSync.init(null, {
ports: {
min: 3001,
max: 3002
}
});
}
gulp.task('develop', ['move'], function () {
nodemon({
script: './src/server.js',
ext: 'html js',
env: { 'NODE_ENV': 'development'},
stdout: false,
stderr: false,
nodeArgs: ['--debug'],
watch: ['src/']
});
nodemon.on('restart', function (files) {
gutil.log('[server] App restarted due to: ', gutil.colors.cyan(files));
}).on('stdout', function(raw) {
var msg = raw.toString('utf8');
gutil.log('[server]', gutil.colors.green(msg));
if(msg.indexOf('avisi-website has started') !== -1) {
lintScripts();
browserSync.reload();
}
}).on('stderr', function(err) {
var msg = err.toString('utf8');
// For some reason debugger attachment gets logged on 'stderr', so we catch it here...
if (msg.indexOf('debugger listening on port') === 0) {
gutil.log('[server]', gutil.colors.green(msg));
} else {
handleError('Node server')(msg);
}
});
});
gulp.task('move', function() {
return gulp.src(['src/themify-icons/**']).pipe(gulp.dest('assets/css'));
});
gulp.task('less', function() {
return styles();
});
gulp.task('scripts', function() {
return scripts(false);
});
gulp.task('images', function() {
return images();
});
gulp.task('watchScripts', function() {
return scripts(true);
});
gulp.task('lint', function() {
return lintScripts();
});
gulp.task('svg', function() {
return gulp.src('src/svg/*.svg')
.pipe(svgmin())
.pipe(gulp.dest('./assets/svg'));
});
gulp.task('watchLintScripts', function() {
gulp.watch('src/**/*.js', ['lintScripts']);
});
gulp.task('watchLess', function() {
return watch({
name: 'less',
glob: './src/**/*.less'
}, function () {
return styles()
.pipe(browserSync.reload({
stream:true
}));
});
});
gulp.task('wufoo', wufoo);
gulp.task('browser-sync', ['develop'], function() {
startBrowserSync();
setTimeout(function() {
openWebpage('http://localhost:3000');
}, 3000);
});
gulp.task('build', ['move', 'scripts', 'less', 'svg','images', 'wufoo'], function() {
return gulp.src([
'assets/css/*.css',
'assets/js/*.js'
]).pipe(bust('busters.json')).pipe(gulp.dest('./assets'));
});
gulp.task('default', ['watchScripts', 'watchLess', 'browser-sync']);
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.