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'); | |
}); |
This comment has been minimized.
This comment has been minimized.
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Hi, i`m tring to run gulp compass with this conf
gulp.task('compass', function () {
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.