You get a bonus - 1 coin for daily activity. Now you have 1 coin

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

Lecture



Gulp.js is a streaming project builder on JS. He uses Stream and is really very fast. For example, I have a project with about a thousand stylus files, GruntJS needs about 2.5 seconds to build and 2 seconds to process with autoprefixer. Gulp does all this in 0.5 seconds, winning GruntJS at least 4 times.

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

You may be scared away by the youth of the project, the lack of plug-ins and a small community. But this is not the case, at the moment an active development of the project is under way, a sufficient number of plug-ins for tasks for popular tools are written. At the moment there are 165 plug-ins, you can see them here.

In this article there will be more practice, we will build the frontend development environment using Jade and Stylus, launch the local server and connect Livereload. I put the project on Github, experiment.


Install gulp

You must have Node.JS and npm installed.
Create a project directory, create a directory structure and install Gulp and the necessary plugins.

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 


In the root of the project there is a gulpfile.js configuration file and we will edit it.

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:

Now create the first task.
 // Собираем 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 }); 

In Gulp, we work with the stream, so we get data from gulp.src and process it in line.

Also create tasks for processing Jade, images and JS


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

The tasks we need above are designed for development and of course I want to track file changes and have Livereload on the server
To do this, create a task 'watch'.

 // Запуск сервера разработки 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'); }); 


Now you can run our project and see what happened.
 $ gulp watch 


The server is available at localhost: 9000 We have created an environment for web development projects using Stylus and Jade with Livereload. Now you need to build an optimized project. To do this, create a task 'build'

Build project
 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')) }); 


Run and get the finished project in the build folder
 $ gulp build 

Try GulpJS and start using really fast stuff in your projects.

Comments


To leave a comment
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Scripting client side JavaScript, jqvery, BackBone

Terms: Scripting client side JavaScript, jqvery, BackBone