var gulp = require('gulp'),
jade = require('gulp-jade'),
stylus = require('gulp-stylus'),
coffee = require('gulp-coffee'),
livereload = require('gulp-livereload'),
imagemin = require('gulp-imagemin'),
concat = require('gulp-concat'),
connect = require('connect'),
serveStatic = require('serve-static'),
nib = require('nib');
/*
* Create tasks
*
* stylus for the CSS preprocessor Stylus
* jade – to-HTML preprocessor Jade
* coffee – JavaScript-preprocessor CoffeеScript
* concat – stick all the CSS and JS in separate files
*/
gulp.task('stylus', function() {
gulp.src('./styl/*.styl')
.pipe(stylus({use: nib(), compress: true}))
.on('error', console.log) // Print errors to the console
.pipe(gulp.dest('./public/css/')) // Print the generated CSS files in the same folder with the same name but with different extension
.pipe(livereload()); // Restart the server LiveReload
});
gulp.task('jade', function(){
gulp.src('./*.jade')
.pipe(jade({pretty: true}))
.on('error', console.log) // Print errors to the console
.pipe(gulp.dest('./public/')) // Print the generated HTML files in the same folder with the same name but with different extension
.pipe(livereload()); // Restart the server LiveReload
});
gulp.task('coffee',function(){
gulp.src('./coffee/*.coffee')
.pipe(coffee({bare: true}))
.on('error', console.log) // Print errors to the console
.pipe(gulp.dest('./public/js')) // Print the generated JavaScript files in the same folder with the same name but with different extension
.pipe(livereload()); // Restart the server LiveReload
});
gulp.task('concat', function(){
gulp.task('coffee');
gulp.src('./public/js/*.js')
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./public/min/'))
.pipe(livereload());
gulp.task('styl');
gulp.src('./public/css/*.css')
.pipe(concat('styles.css'))
.pipe(gulp.dest('./public/min/'))
.pipe(livereload());
});
gulp.task('imagemin',function(){
gulp.src('./img/**/*')
.pipe(imagemin())
.pipe(gulp.dest('./public/img/'));
});
/*
* Create a web server to work with the project via the browser
*/
gulp.task('server', function() {
connect()
.use(require('connect-livereload')())
.use(serveStatic(__dirname + '/public'))
.listen('3333');
console.log('Server running at http://localhost:3333');
});
/*
* Create a task, looking for changes
*/
gulp.task('watch', function(){
livereload.listen();
gulp.watch('./styl/*.styl',['stylus']);
gulp.watch('./*.jade',['jade']);
gulp.watch('./coffee/*.coffee',['coffee']);
gulp.watch(['./public/js/*.js','./public/css/*.css'],['concat']);
gulp.watch('./img/**/*',['imagemin']);
gulp.start('server');
});
gulp.task('default',['watch','stylus','jade','coffee','concat','imagemin']);
Find more questions by tags ProgrammingPreprocessorsGulp.jsWeb Development