gulp - How to Use Gulp - gulp sass - gulp tutorial - learn gulp
What is gulp?
- Gulp.js is what we call a JavaScript Task Runner, it is Open Source and available on GitHub.
- It helps you automate repetitive tasks such as minification, compilation, unit testing, linting, etc.
- Gulp.js does not revolutionize automation but simplifies it tremendously.
Gulp Installation:
- To use Gulp, you need to install it as a global module first through NPM (if you're new to NPM, you can get to know it better in our Getting Started with NPM tutorial):
sudo npm install --global gulp
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- Now we need to download Gulp and its plugins to our project. We will specify the plugins we're about to use in package.json:
{
"devDependencies": {
"gulp": "latest",
"gulp-util": "latest",
"gulp-sass": "latest",
"gulp-coffee": "latest",
"gulp-uglify": "latest",
"gulp-concat": "latest",
"gulp-connect": "latest"
}
}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- We list them in devDependencies because you'll typically run Gulp during the development stage.
- Now install the dependencies by running:
npm install
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- This creates node_modules directory with all the plugins in the root of your project.
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
Using the First Plugin:
- Gulp relies on the plugins to do almost everything, so we need to learn how to use them.
- Now we will use a plug-in called gulp-util. Its purpose is to log custom messages to the terminal.
First, we need to load the plug-in:
var gutil = require('gulp-util');
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
After that we write task as in the previous case:
gulp.task('log', function() {
gutil.log('== My Log Task ==')
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
Here we called plug-in we defined as gutil, and called its log method with our custom message. Now we can run log task in the terminal:
$ gulp log
[19:41:37] Using gulpfile ~/gulp-project/gulpfile.js
[19:41:37] Starting 'log'...
[19:41:37] == My First Task ==
[19:41:37] Finished 'log' after 763 μs
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
Only 4 functions you need to learn in gulp to code :
- gulp.task
- gulp.watch
- gulp.src
- gulp.src
gulp.task(name[, deps], fn) :
gulp.task(‘hello', function() {
console.log('Hello world!');
});
gulp.task('css', ['greet'], function () {
// Deal with CSS here
});
gulp.task('build', ['css', 'js', 'imgs']);
gulp.task('default', function () {
// Your default task
});Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
gulp.watch(glob[, opts], tasks) :
gulp.watch('js/**/*.js', ['Task']);Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
gulp.src(globs[, options]) :
gulp.src('./*.jade')
gulp.src('*.+(js|css)')
gulp.src('*.{jpg,jpeg,png,gif}')
gulp.src(['js/**/*.js', '!js/**/*.min.js'])Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
gulp.dest(path) :
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./app'))
.pipe(gulp.dest('./app'))
.pipe(minify())
.pipe(gulp.dest('./dist'));Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
Gulp Error Handling : Below is the demo code to handle errors in gulp technology
gulp.task('coffee', function(){
return gulp.src('app/scripts/*.coffee')
.pipe(coffee().on('error', console.log))
.pipe(gulp.dest('.tmp/scripts/'));
});