Gulp.js – What's the big deal – Great another Task Runner...
Gulp.js – What's the big deal – Great another Task Runner...
1 0
gulp-lightning-talk
On Github ZKM / gulp-lightning-talk
Gulp.js
What's the big deal
Created by Zach Schneider / @zkm
What is Gulp.js
Gulp is an automated task runner — or build process.
You got this Zach, no pressure.Great another Task Runner...
Speed
Speedtesting between gulp.js and Grunt
Speed comparison test
Sass compilation
Another Speed comparison test
Javascript minification and concatination using Uglify.js
Write Less do more.
gruntfile.js
Here is an example of a gruntfile.js
grunt.initConfig({
sass: {
dist: {
files: [{
cwd: 'app/styles',
src: '**/*.scss',
dest: '../.tmp/styles',
expand: true,
ext: '.css'
}]
}
},
autoprefixer: {
options: ['last 1 version'],
dist: {
files: [{
expand: true,
cwd: '.tmp/styles',
src: '{,*/}*.css',
dest: 'dist/styles'
}]
}
},
watch: {
styles: {
files: ['app/styles/{,*/}*.scss'],
tasks: ['sass:dist', 'autoprefixer:dist']
}
}
});
grunt.registerTask('default', ['styles', 'watch']);
gulpfile.js
Now here is an example of a gulpfile.js doing the same thing.
gulp.task('sass', function () {
gulp.src('app/styles/**/*.scss')
.pipe(sass())
.pipe(autoprefixer('last 1 version'))
.pipe(gulp.dest('dist/styles'));
});
gulp.task('default', function() {
gulp.run('sass');
gulp.watch('app/styles/**/*.scss', function() {
gulp.run('sass');
});
});
Leonardo da Vinci once said
“Simplicity is the ultimate sophistication.”Install Gulp
npm install -g gulp Just like Grunt we need to create a package.json file. Install gulp and gulp-utils to your project npm install gulp gulp-util --save-dev Create your gulpfile.js
var gulp = require('gulp');
var gutil = require('gulp-util');
gulp.task('default', function(){
// Default task code
});
Now run gulp from the command line and watch the magic.
This slide has fragments which are also stepped through in the notes window.
Conclusion
If you are looking for a simple and fast task runner solution, I would recommend using Gulp.