-
-
Save eliasfaical/3cd1b1b86b69a15d55bb to your computer and use it in GitHub Desktop.
Gulp - Project to build site with Jade + Stylus with Livereload & Watch.
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
/* | |
Created by: Mauricio Rocha | |
www.sampapix.com.br | |
Install the plugins below, use -global or --save-dev either way will work. | |
gulp, gulp-jade, gulp-concat, gulp-uglify, gulp-minify-css, gulp-stylus, gulp-obfuscate, gulp-connect | |
Create the folders below inside your project folder: | |
src, src/js, src/styl | |
Save your .jade files inside src. | |
Save your .styl files inside src/styl. | |
Save this file inside your projects folder and run: | |
gulp | |
Open any browser, firefox or chrome, and type localhost:8080 | |
You are done. Enjoy! | |
P.S: You don't need anything else, nothing to install on the browser either, just edit your files. | |
Add ".js" files to the watching section if you need them to be reload automatically. | |
*/ | |
var gulp = require('gulp'); | |
var jade = require('gulp-jade'); | |
var concat = require('gulp-concat'); | |
var uglify = require('gulp-uglify'); | |
var minifyCSS = require('gulp-minify-css'); | |
var stylus = require('gulp-stylus'); | |
var obfuscate = require('gulp-obfuscate'); | |
var connect = require('gulp-connect'); | |
var src = './src'; | |
/*build tasks*/ | |
var build = './build'; | |
var paths = { | |
jade: [src+'/*.jade'], | |
stylus: [src+'/styl/*.styl'] | |
}; | |
gulp.task('connect',function () { | |
var options = { | |
root: build, | |
livereload: true | |
}; | |
connect.server(options); | |
}); | |
gulp.task('jadeBuild', function() { | |
var options = { | |
pretty: true | |
}; | |
gulp.src(src+'/*.jade') | |
.pipe(jade(options,{path:'../img'})) | |
.pipe(gulp.dest(build)) | |
.pipe(connect.reload()); | |
}); | |
gulp.task('jsBuild',function() { | |
return gulp.src([src+'/js/*.js']) | |
.pipe(concat('standard.js')) | |
// .pipe(uglify()) // uglify code | |
// .pipe(obfuscate()) // obfuscate code | |
.pipe(gulp.dest(build+'/js')); | |
}); | |
gulp.task('cssBuild',function () { | |
return gulp.src(src+'/css/*.css') | |
.pipe(minifyCSS({keepBreaks:true})) | |
.pipe(gulp.dest(build+'/css')); | |
}); | |
gulp.task('stylBuild',function () { | |
return gulp.src(src+'/styl/*.styl') | |
.pipe(stylus()) | |
// .pipe(minifyCSS({keepBreaks:true})) // minify css | |
.pipe(minifyCSS()) | |
.pipe(gulp.dest(build+'/css')); | |
}); | |
/*watch*/ | |
gulp.task('watch', function () { | |
gulp.watch(paths.jade, ['jadeBuild']); | |
gulp.watch(paths.stylus, ['stylBuild']); | |
}); | |
gulp.task('imgBuild',function () { | |
return gulp.src([src+'/img/*'], {base: src+'/img'}) | |
.pipe(gulp.dest(build+'/img')); | |
}); | |
gulp.task('default', ['connect','jsBuild','stylBuild','imgBuild','watch']); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment