Skip to content

Instantly share code, notes, and snippets.

@danielronnkvist
Last active November 19, 2015 14:34
Show Gist options
  • Save danielronnkvist/cb699a1b14f32534ccfd to your computer and use it in GitHub Desktop.
Save danielronnkvist/cb699a1b14f32534ccfd to your computer and use it in GitHub Desktop.
My gulpscript for one page html
{
"directory": "build/vendor/"
}
build
node_modules
{
"name": "Bootstrap",
"dependencies": {
"normalize-css": "~3.0.3"
}
}
var gulp = require('gulp'),
sass = require('gulp-sass'),
gutil = require('gulp-util'),
bower = require('bower'),
bowerFiles = require('main-bower-files'),
coffee = require('gulp-coffee'),
inject = require('gulp-inject'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch'),
webserver = require('gulp-webserver');
var outputs = {
css: './build/assets/css/',
js: './build/assets/js/'
}
var watchFiles = {
style: './scss/style.scss',
scss: './scss/**/*.scss',
coffee: './coffee/**/*.coffee',
html: './index.html',
images: './images/*'
}
function defaultBuild() {
var css = gulp.src(watchFiles.style)
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(outputs.css));
var js = gulp.src(watchFiles.coffee)
.pipe(plumber())
.pipe(coffee({bare: true}).on('error', gutil.log))
.pipe(gulp.dest(outputs.js));
var bowerJs = gulp.src(bowerFiles(), {read: false});
return gulp.src(watchFiles.html)
.pipe(plumber())
.pipe(inject(css, {addRootSlash: true, ignorePath: 'build'}))
.pipe(inject(bowerJs, {name: 'bower', addRootSlash: true, ignorePath: 'build'}))
.pipe(inject(js, {addRootSlash: true, ignorePath: 'build'}))
.pipe(gulp.dest('./build'))
}
function moveImages(){
gulp.src(['images/**/*']).pipe(gulp.dest('build/images'));
}
gulp.task('images', moveImages)
gulp.task('bower', function () {
return bower();
});
gulp.task('watch', function () {
watch([watchFiles.scss, watchFiles.coffee, watchFiles.html], function () {
return defaultBuild();
});
watch(watchFiles.images, function(){
return moveImages();
});
});
gulp.task('webserver', function() {
gulp.src('build')
.pipe(webserver({
livereload: true,
directoryListing: false,
fallback: 'index.html',
open: true
}));
});
gulp.task('start', ['build', 'watch', 'webserver']);
gulp.task('build', defaultBuild);
gulp.task('default', defaultBuild);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<!-- bower:css -->
<!-- bower installed css files will go here... -->
<!-- endinject -->
<!-- inject:css -->
<!-- built css files will go here... -->
<!-- endinject -->
</head>
<body>
<!-- bower:js -->
<!-- bower installed scripts will go here... -->
<!-- endinject -->
<!-- inject:js -->
<!-- app scripts will go here... -->
<!-- endinject -->
</body>
</html>
{
"scripts": {
"start": "gulp start",
"postinstall": "bower install && gulp build"
},
"devDependencies": {
"bower": "^1.5.3",
"gulp": "^3.9.0",
"gulp-coffee": "^2.3.1",
"gulp-inject": "^3.0.0",
"gulp-plumber": "^1.0.1",
"gulp-sass": "^2.0.4",
"gulp-util": "^3.0.6",
"gulp-watch": "^4.3.5",
"gulp-webserver": "^0.9.1",
"main-bower-files": "^2.9.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment