try gulp and stylus

There is a Build War among the js task runners, most famous of them are Grunt and Gulp. We have been using Grunt in our team who builded the site of meituan.com. After a period of time with Grunt, I found it was a little verbose, and usually I needed to spent a lot of time writing the configs.

I read lots of articles, and decided to have a try with gulp. Meantime I rewrote the css with stylus which is sexy than sass, because I don't have to install unfamiliar ruby just for sass.

My gulpfile.js is shown as below. I like the streaming pattern of Gulp. And now I write more codes than configs.

var gulp = require('gulp');

var stylus = require('gulp-stylus');
var nodemon = require('gulp-nodemon');
var minifyCSS = require('gulp-minify-css');
var nib = require('nib');

// stylus
gulp.task('stylus', function () {
    gulp.src('./static/stylus/screen.styl')
        .pipe(stylus({error: true, use: [nib()]}))
        .pipe(minifyCSS())
        .pipe(gulp.dest('./static/css/'));
});

// nodemon
gulp.task('dev', function() {
    nodemon({ script: 'index.js', ext: 'jade styl js', ignore: ['./node_modules/**'] })
        .on('change', ['stylus'])
        .on('restart', function () {
            console.log('restarted!')
        });
});
gulp.task('default', ['dev']);

As shown above, I also adapt nodemon to restart server and recompile styl files when files with specified exts are changed.

The biggest pros of Gulp is her ecosystem which is vital, but for me it is enough now.

References

comments powered by Disqus