Gulp css

Posted 6 years ago - updated 6 years ago gulp css

Install globally

$ npm install -g gulp

Install into project dependencies

Create an empty package.json:

{

}

npm install gulp --save-dev

 Packages

$ npm install gulp-minify-css --save-dev
$ npm install gulp-autoprefixer --save-dev
$ npm install gulp-notify --save-dev
$ npm install gulp-ruby-sass --save-dev

 gulp-minify-css

Create a gulpfile.js

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');

gulp.task('css',function() {
    return gulp.src('css/main.css')
        .pipe(minifycss())
        .pipe(gulp.dest('css/min'));
});

Run:

$ gulp css

Default tasks

gulp.task('watch', function() {
    gulp.watch('css/*.css',['css']);
});

gulp.task('default', ['watch']);

Run:

$ gulp

gulp-autoprefixer

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('css',function() {
    return gulp.src('css/main.css')
        .pipe(autoprefixer())
        .pipe(minifycss())
        .pipe(gulp.dest('css/min'));
});

gulp.task('watch', function() {
    gulp.watch('css/*.css',['css']);
});

gulp.task('default', ['watch']);

gulp-notify

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');

gulp.task('css',function() {
    return gulp.src('css/main.css')
        .pipe(autoprefixer())
        .pipe(minifycss())
        .pipe(gulp.dest('css/min'))
        .pipe(notify({ message: 'Complete' }));
});

gulp.task('watch', function() {
    gulp.watch('css/*.css',['css']);
});

gulp.task('default', ['watch']);

gulp-ruby-sass

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');

gulp.task('css',function() {
    return gulp.src('sass/main.sass')
        .pipe(sass({ style: 'compressed'}))
        .pipe(autoprefixer())
        .pipe(gulp.dest('css/min'))
        .pipe(notify({ message: 'Complete' }));
});

gulp.task('watch', function() {
    gulp.watch('sass/*.sass',['css']);
});

gulp.task('default', ['watch']);

Note you may need to install sass

    sudo gem install sass