Questions tagged [gulp]

Gulp is a javascript build system, node.js-based task runner like grunt. It can automate common tasks during your development process. Gulp uses the streams-concept and code-over-configuration for a simpler and more intuitive build process. The code-over-configuration concept can create more readable and simple tasks, despite grunt tasks which are highly over-configured.

Install

First you have to install gulp globally:

npm install gulp -g

After that you should add gulp to your project (package.json file):

npm install --save-dev gulp

Then you should create a file named gulpfile.js and define your tasks in that. Any valid node.js code can be used in gulpfile.js (like defining functions, importing extra modules, etc.).

After you created your tasks, you should export them (as you would in any other module). And then you can run the task by running gulp <task name> in terminal (in the project folder). Running gulp without specifying would run the default task if present (the main task is usually named default to be more convenient)

Example

const gulp = require('gulp');
const less = require('gulp-less');
const autoprefix = require('gulp-autoprefixer');

gulp.task('css', () => {
   gulp.src('assets/app.less')
      .pipe(less())
      .pipe(autoprefix('last 2 version', 'ie 8', 'ie 9'))
      .pipe(gulp.dest('build'));
});

And to run this task, run this in terminal:

$ gulp css

Useful Links

• Documentation
• GitHub
• NPM package
• Recipes
• Stream-handbook
• Plugins
• Building with Gulp (Introduction at Smashing Magazine)
• Wikipedia article

Related Tags

• gulp-autoprefixer
• gulp-concat
• gulp-less
• gulp-sass
• gulp-sourcemaps
• gulp-uglify
• gulp-watch