GulpJS - fantastically fast project builder

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.

You can scare away 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 posted 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

At 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 a stream, so we get data from gulp.src and process it in line.

Also create tasks for processing Jade, images and JS

 //  html  Jade gulp.task('jade', function() { gulp.src(['./assets/template/*.jade', '!./assets/template/_*.jade']) .pipe(jade({ pretty: true })) //  Jade    ./assets/template/    _* .on('error', console.log) //   ,    .pipe(gulp.dest('./public/')) //    .pipe(livereload(server)); //      }); //  JS gulp.task('js', function() { gulp.src(['./assets/js/**/*.js', '!./assets/js/vendor/**/*.js']) .pipe(concat('index.js')) //   JS,      ./assets/js/vendor/** .pipe(gulp.dest('./public/js')) .pipe(livereload(server)); //      }); //     gulp.task('images', function() { gulp.src('./assets/img/**/*') .pipe(imagemin()) .pipe(gulp.dest('./public/img')) });

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 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.

Source: https://habr.com/ru/post/208890/

All Articles