Skip to content

Instantly share code, notes, and snippets.

@e-river
Last active January 2, 2016 11:19
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save e-river/8295764 to your computer and use it in GitHub Desktop.
Save e-river/8295764 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link
Author

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