Last active
January 2, 2016 11:19
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | |
}); |
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
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.