Gulp.js - the stream collector of projects on JS.

Install gulp

Project structure:

|--/assets // Компоненты |--|--/template |--|--/stylus |--|--/js |--|--/img |--/build // Каталог релиза |--/public // Каталог разработки |--package.json |--gulpfile.js 

Installation:

 $ mkdir assets public build assets/js assets/img assets/stylus assets/template $ touch gulpfile.js $ sudo npm install gulp -g $ npm init $ npm install gulp gulp-jade gulp-stylus gulp-livereload gulp-myth gulp-csso gulp-imagemin gulp-uglify gulp-concat connect --save-dev 

Initialize the plugins:

 var lr = require('tiny-lr'), // Минивебсервер для livereload gulp = require('gulp'), // Сообственно Gulp JS jade = require('gulp-jade'), // Плагин для Jade stylus = require('gulp-stylus'), // Плагин для Stylus livereload = require('gulp-livereload'), // Livereload для Gulp myth = require('gulp-myth'), // Плагин для Myth - http://www.myth.io/ csso = require('gulp-csso'), // Минификация CSS imagemin = require('gulp-imagemin'), // Минификация изображений uglify = require('gulp-uglify'), // Минификация JS concat = require('gulp-concat'), // Склейка файлов connect = require('connect'), // Webserver server = lr(); 

Tasks:

 // Собираем Stylus gulp.task('stylus', function() { gulp.src('./assets/stylus/screen.styl') .pipe(stylus({ use: ['nib'] })) // собираем stylus .on('error', console.log) // Если есть ошибки, выводим и продолжаем .pipe(myth()) // добавляем префиксы - http://www.myth.io/ .pipe(gulp.dest('./public/css/')) // записываем css .pipe(livereload(server)); // даем команду на перезагрузку css }); 

 // Локальный сервер для разработки gulp.task('http-server', function() { connect() .use(require('connect-livereload')()) .use(connect.static('./public')) .listen('9000'); console.log('Server listening on http://localhost:9000'); }); 

 // Запуск сервера разработки gulp watch gulp.task('watch', function() { // Предварительная сборка проекта gulp.run('stylus'); gulp.run('jade'); gulp.run('images'); gulp.run('js'); // Подключаем Livereload server.listen(35729, function(err) { if (err) return console.log(err); gulp.watch('assets/stylus/**/*.styl', function() { gulp.run('stylus'); }); gulp.watch('assets/template/**/*.jade', function() { gulp.run('jade'); }); gulp.watch('assets/img/**/*', function() { gulp.run('images'); }); gulp.watch('assets/js/**/*', function() { gulp.run('js'); }); }); gulp.run('http-server'); }); 

 $ gulp watch 

 gulp.task('build', function() { // css gulp.src('./assets/stylus/screen.styl') .pipe(stylus({ use: ['nib'] })) // собираем stylus .pipe(myth()) // добавляем префиксы - http://www.myth.io/ .pipe(csso()) // минимизируем css .pipe(gulp.dest('./build/css/')) // записываем css // jade gulp.src(['./assets/template/*.jade', '!./assets/template/_*.jade']) .pipe(jade()) .pipe(gulp.dest('./build/')) // js gulp.src(['./assets/js/**/*.js', '!./assets/js/vendor/**/*.js']) .pipe(concat('index.js')) .pipe(uglify()) .pipe(gulp.dest('./build/js')); // image gulp.src('./assets/img/**/*') .pipe(imagemin()) .pipe(gulp.dest('./build/img')) }); 

 $ gulp build