Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
gulpfile.js using gulp-ruby-sass, gulp-autoprefixer, gulp.spritesmith, gulp-jade, gulp-less, gulp-minify-css, gulp-concat and gulp-uglify, gulp-watch, gulp-plumber, gulp-clean.
var gulp = require('gulp')
, concat = require('gulp-concat')
, uglify = require('gulp-uglify')
, watch = require('gulp-watch')
, sass = require('gulp-ruby-sass')
, autoprefixer = require('gulp-autoprefixer')
, spritesmith = require("gulp.spritesmith")
, minifyCSS = require('gulp-minify-css')
, plumber = require('gulp-plumber')
, jade = require('gulp-jade')
, gulpkss = require('gulp-kss')
, less = require('gulp-less')
, clean = require('gulp-clean')
;
// LESS for gulp-kss
gulp.task('less', function () {
gulp.src('styleguide/template/public/*.less')
.pipe(less())
.pipe(gulp.dest('styleguide/public'));
});
// KSS
gulp.task('kss', function () {
gulp.src([
'styleguide/public/script.js'
], {read: false})
.pipe(clean({force: true}));
gulp.src(['dev/sass/**/*.scss'])
.pipe(gulpkss({
overview: 'styleguide/styleguide.md', //Absolute path to markdown file which is used for styleguide home page
templateDirectory: 'styleguide/template'
// kss: Options supported by KSS-Node (https://github.com/hughsk/kss-node)
}))
.pipe(gulp.dest( 'styleguide/'));
gulp.src(['dev/sass/**/*.scss'])
.pipe(sass({
style: 'expanded'
}))
.pipe(autoprefixer({
browsers: ["last 4 versions", "Firefox >= 27", "Blackberry >= 7", "IE 8", "IE 9"],
cascade: false
}))
.pipe(gulp.dest('styleguide/public'));
//Add any styleguide images
gulp.src('htdocs/shared/img/**/*')
.pipe(gulp.dest('styleguide/img/'));
gulp.src('dev/sprite/**/*')
.pipe(gulp.dest('styleguide/public/icon/'));
//Add any styleguide JS files
gulp.src('htdocs/shared/js/**')
.pipe(gulp.dest('styleguide/public/'));
});
// Sass
gulp.task('sass', function () {
return gulp.src('dev/sass/**/*.scss')
.pipe(plumber())
.pipe(sass({
style: 'expanded'
}))
.on('error', function(e) {
console.log(e);
})
.pipe(autoprefixer({
browsers: ["last 4 versions", "Firefox >= 27", "Blackberry >= 7", "IE 8", "IE 9"],
cascade: false
}))
.pipe(gulp.dest('htdocs/shared/css'));
});
// CSS Sprite
gulp.task('sprite', function () {
var spriteData = gulp.src('dev/sprite/*.png')
.pipe(plumber())
.pipe(spritesmith({
imgName: 'sprite.png',
cssName: '_sprite.scss',
imgPath: '../img/sprite.png'
}));
spriteData.img.pipe(gulp.dest('htdocs/shared/img'));
spriteData.css.pipe(gulp.dest('dev/sass'));
});
// Jade
gulp.task('jade', function () {
gulp.src(['dev/jade/**/*.jade','!dev/jade/**/_*.jade'])
.pipe(plumber())
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('htdocs'));
});
// Minify CSS
gulp.task('minify-css', function() {
gulp.src('htdocs/shared/css/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('htdocs/shared/css/'));
});
// Watch
gulp.task('watch', function() {
gulp.watch('dev/sass/**', ['sass']);
gulp.watch('dev/sprite/*', ['sprite']);
gulp.watch('dev/jade/**', ['jade']);
gulp.watch(['dev/sass/**'], ['kss']);
gulp.watch('dev/dev-js/**', ['concat']);
gulp.watch('styleguide/template/public/**', ['less']);
gulp.watch('dev/dev-js/**', ['copy']);
});
// Copy
gulp.task('copy', function() {
gulp.src([
'dev/dev-js/**'
])
.pipe(gulp.dest('htdocs/shared/js'));
});
// Concat
gulp.task('concat', function() {
gulp.src([
'dev/dev-js/jquery-ui.min.js',
'dev/dev-js/jquery.ui.datepicker-ja.js'
])
.pipe(concat("jquery.datepicker.js"))
.pipe(gulp.dest('htdocs/shared/js'));
});
//Uglify
gulp.task('compress', function() {
gulp.src([
'htdocs/dev-js/**/*'
])
.pipe(uglify())
.pipe(gulp.dest('htdocs/js'));
});
// Default Task
gulp.task('default', function() {
gulp.run('watch');
});
// Image
gulp.task('img', function() {
gulp.run('sprite');
});
// Deploy Task
gulp.task('deploy', function() {
gulp.run('minify-css', 'compress');
});
// Release Task
gulp.task('release', function() {
gulp.run('concat');
});
@manoelneto

This comment has been minimized.

Show comment
Hide comment
@manoelneto

manoelneto Jan 10, 2014

Hi, i`m tring to run gulp compass with this conf

gulp.task('compass', function () {

    gulp.src('sass/**/*.scss')
        .pipe(compass({
            config_file: './sass/config.rb'
        }))
        .pipe(gulp.dest('css'));
});

but i`m getting this error:

fs.js:427
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT, no such file or directory '/Users/manoel/git/gulp/css/alerts.css'
at Object.fs.openSync (fs.js:427:18)
at Object.fs.readFileSync (fs.js:284:15)
at /Users/manoel/git/gulp/node_modules/gulp-compass/index.js:25:43
at ChildProcess. (/Users/manoel/git/gulp/node_modules/gulp-compass/lib/compass.js:88:21)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:735:16)
at Socket. (child_process.js:948:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:466:12)

In grunt, it works. Do you know what can be? Thanks.

Hi, i`m tring to run gulp compass with this conf

gulp.task('compass', function () {

    gulp.src('sass/**/*.scss')
        .pipe(compass({
            config_file: './sass/config.rb'
        }))
        .pipe(gulp.dest('css'));
});

but i`m getting this error:

fs.js:427
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT, no such file or directory '/Users/manoel/git/gulp/css/alerts.css'
at Object.fs.openSync (fs.js:427:18)
at Object.fs.readFileSync (fs.js:284:15)
at /Users/manoel/git/gulp/node_modules/gulp-compass/index.js:25:43
at ChildProcess. (/Users/manoel/git/gulp/node_modules/gulp-compass/lib/compass.js:88:21)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:735:16)
at Socket. (child_process.js:948:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:466:12)

In grunt, it works. Do you know what can be? Thanks.

@e-river

This comment has been minimized.

Show comment
Hide comment
@e-river

e-river Jan 10, 2014

Thanks for your comment.

I have known the error appear using this gulpfile.js. But If you try again gulp command, it will be work.
I'm afraid I don't know why this error appear. I have checked about this error.When it is clear, I will update this gulpfile.js.
If you know about this error, please tell me,thanks.

Owner

e-river commented Jan 10, 2014

Thanks for your comment.

I have known the error appear using this gulpfile.js. But If you try again gulp command, it will be work.
I'm afraid I don't know why this error appear. I have checked about this error.When it is clear, I will update this gulpfile.js.
If you know about this error, please tell me,thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment