demo.1
- added possibility to add data into tempaltes via json - restructured output files - some work on styles
This commit is contained in:
Stephan
parent
1bb57b109b
commit
8bc8da74db
18 changed files with 1004 additions and 199 deletions
232
gulpfile.js
232
gulpfile.js
|
|
@ -15,6 +15,8 @@ var build = {
|
|||
root: 'build'
|
||||
}
|
||||
|
||||
|
||||
var fs = require('fs');
|
||||
// Load plugins
|
||||
const gulp = require('gulp'),
|
||||
rename = require('gulp-rename'),
|
||||
|
|
@ -25,12 +27,13 @@ concat = require('gulp-concat'),
|
|||
pump = require('pump'),
|
||||
sourcemap = require('gulp-sourcemaps'),
|
||||
prefix = require('gulp-autoprefixer'),
|
||||
testsass = require('gulp-sass'),
|
||||
sass = require('gulp-ruby-sass'),
|
||||
sass = require('gulp-sass'),
|
||||
rubysass = require('gulp-ruby-sass'),
|
||||
nunjucks = require('gulp-nunjucks-render');
|
||||
cssnano = require('gulp-cssnano'),
|
||||
jshint = require('gulp-jshint'),
|
||||
jscs = require('gulp-jscs'),
|
||||
useref = require('gulp-useref'),
|
||||
sasslint = require('gulp-sass-lint'),
|
||||
uglifyjs = require('uglify-es'),
|
||||
composer = require('gulp-uglify/composer'),
|
||||
|
|
@ -42,16 +45,19 @@ changed = require('gulp-changed'),
|
|||
newer = require('gulp-newer'),
|
||||
plumber = require('gulp-plumber'),
|
||||
notify = require('gulp-notify'),
|
||||
data = require('gulp-data'),
|
||||
browsersync = require('browser-sync').create();
|
||||
|
||||
var minify = composer(uglifyjs, console);
|
||||
|
||||
// TEST - Tasks
|
||||
gulp.task('test', function() {
|
||||
|
||||
|
||||
// Task for the looks
|
||||
gulp.task('sass', function() {
|
||||
return gulp.src('source/style/**/*.+(scss|sass)')
|
||||
.pipe(plumbError('Error Running Sass'))
|
||||
.pipe(sourcemap.init())
|
||||
.pipe(testsass({
|
||||
.pipe(sass({
|
||||
includePaths: ['source/bower_components']
|
||||
}))
|
||||
.pipe(prefix(['>= 4%', 'last 2 version']))
|
||||
|
|
@ -62,7 +68,9 @@ gulp.task('test', function() {
|
|||
}))
|
||||
});
|
||||
|
||||
gulp.task('testsync', function() {
|
||||
|
||||
// Task for automagically reload browsers
|
||||
gulp.task('syncreload', function() {
|
||||
browsersync.init({
|
||||
open: false,
|
||||
server: 'build',
|
||||
|
|
@ -70,9 +78,13 @@ gulp.task('testsync', function() {
|
|||
});
|
||||
});
|
||||
|
||||
gulp.task('testnunjucks', function() {
|
||||
// templating engine
|
||||
gulp.task('nunjucks', function() {
|
||||
return gulp.src('source/pages/**/*.+(html|njk)')
|
||||
.pipe(plumbError('Error Running Nunjucks'))
|
||||
.pipe(data(function() {
|
||||
return JSON.parse(fs.readFileSync('./source/data.json'))
|
||||
}))
|
||||
.pipe(nunjucks({
|
||||
path: ['source/templates'],
|
||||
envOptions: {
|
||||
|
|
@ -128,14 +140,17 @@ gulp.task('clean:dev', function() {
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Task - Clean build directory
|
||||
gulp.task('clean', function() {
|
||||
return del([build.scripts, build.styles, build.images]);
|
||||
});
|
||||
|
||||
// Task - Styles
|
||||
gulp.task('styles', () => sass(source.styles, {sourcemap: true})
|
||||
.on('error', sass.logError)
|
||||
gulp.task('styles', () => rubysass(source.styles, {sourcemap: true})
|
||||
.on('error', rubysass.logError)
|
||||
// .pipe(newer({dest: build.styles, ext: '.css'}))
|
||||
.pipe(prefix('last 2 version'))
|
||||
.pipe(gulp.dest(build.styles))
|
||||
|
|
@ -172,106 +187,115 @@ gulp.task('images', function() {
|
|||
return gulp.src(source.images)
|
||||
.pipe(changed(build.images))
|
||||
// .pipe(cache(imagemin({
|
||||
// optimizationLevel: 3,
|
||||
// progressive: true,
|
||||
// interlaced: true })))
|
||||
// )
|
||||
.pipe(gulp.dest(build.images))
|
||||
// .pipe(notify({ message: 'Images task complete' }))
|
||||
;
|
||||
});
|
||||
// optimizationLevel: 3,
|
||||
// progressive: true,
|
||||
// interlaced: true })))
|
||||
// )
|
||||
.pipe(gulp.dest(build.images))
|
||||
// .pipe(notify({ message: 'Images task complete' }))
|
||||
;
|
||||
});
|
||||
|
||||
// Task - Vendor
|
||||
gulp.task('vendor', function() {
|
||||
return gulp.src(source.vendor)
|
||||
.pipe(plumbError())
|
||||
.pipe(gulp.dest(build.vendor))
|
||||
;
|
||||
});
|
||||
// Task - Vendor
|
||||
gulp.task('vendor', function() {
|
||||
return gulp.src(source.vendor)
|
||||
.pipe(plumbError())
|
||||
.pipe(gulp.dest(build.vendor))
|
||||
;
|
||||
});
|
||||
|
||||
//Task - Nunjucks
|
||||
gulp.task('nunjucks', function() {
|
||||
return gulp.src(source.pages)
|
||||
// .pipe(changed(build.root))
|
||||
.pipe(nunjucks({
|
||||
path: ['source/templates'],
|
||||
envOptions: {
|
||||
trimBlocks: true
|
||||
}
|
||||
}))
|
||||
.pipe(gulp.dest(build.root))
|
||||
});
|
||||
//Task - Nunjucks
|
||||
gulp.task('oldnunjucks', function() {
|
||||
return gulp.src(source.pages)
|
||||
// .pipe(changed(build.root))
|
||||
.pipe(nunjucks({
|
||||
path: ['source/templates'],
|
||||
envOptions: {
|
||||
trimBlocks: true
|
||||
}
|
||||
}))
|
||||
.pipe(gulp.dest(build.root))
|
||||
});
|
||||
|
||||
// a task that ensures the other task is complete before reloading browsers
|
||||
gulp.task('overwatch', ['nunjucks', 'styles'], function(done) {
|
||||
// a task that ensures the other task is complete before reloading browsers
|
||||
gulp.task('overwatch', ['oldnunjucks', 'styles'], function(done) {
|
||||
browsersync.reload();
|
||||
done();
|
||||
});
|
||||
|
||||
|
||||
|
||||
// TEST - Watch
|
||||
gulp.task('watch-js', ['lint:js'], browsersync.reload);
|
||||
|
||||
gulp.task('testwatch', function() {
|
||||
gulp.watch('source/code/**/*.js', ['watch-js'])
|
||||
gulp.watch('source/style/**/*.+(scss|sass)', ['test', 'lint:scss']);
|
||||
gulp.watch([
|
||||
'source/templates/**/*',
|
||||
'source/pages/**/*.+(html|njk)'
|
||||
], ['testnunjucks']);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Watch for file changes
|
||||
gulp.task('watch', ['styles', 'scripts', 'nunjucks'], function() {
|
||||
browsersync.init({
|
||||
open: false,
|
||||
server: build.root,
|
||||
// proxy: "http://verser.vrt/virtual/"
|
||||
});
|
||||
|
||||
gulp.watch(source.scripts, ['scripts']).on('change', function(event) {
|
||||
if (event.type === 'deleted') {
|
||||
delete cache.caches['scripts'][event.path];
|
||||
remember.forget('scripts', event.path);
|
||||
|
||||
|
||||
// TEST - Watch
|
||||
gulp.task('watch-js', ['lint:js'], browsersync.reload);
|
||||
|
||||
gulp.task('testwatch', function() {
|
||||
gulp.watch('source/code/**/*.js', ['watch-js'])
|
||||
gulp.watch('source/style/**/*.+(scss|sass)', ['sass', 'lint:scss']);
|
||||
gulp.watch([
|
||||
'source/templates/**/*',
|
||||
'source/pages/**/*.+(html|njk)',
|
||||
'source/data.json'
|
||||
], ['nunjucks']);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Old watch for file changes
|
||||
gulp.task('watch', ['styles', 'scripts', 'oldnunjucks'], function() {
|
||||
browsersync.init({
|
||||
open: false,
|
||||
server: build.root,
|
||||
// proxy: "http://verser.vrt/virtual/"
|
||||
});
|
||||
|
||||
gulp.watch(source.scripts, ['scripts']).on('change', function(event) {
|
||||
if (event.type === 'deleted') {
|
||||
delete cache.caches['scripts'][event.path];
|
||||
remember.forget('scripts', event.path);
|
||||
}
|
||||
});
|
||||
// gulp.watch(source.watch, ['overwatch']);
|
||||
gulp.watch(source.watch, ['styles', 'oldnunjucks']).on('change', browsersync.reload);
|
||||
// gulp.watch(source.images, ['images']);
|
||||
});
|
||||
|
||||
gulp.task('olddefault', ['clean', 'styles', 'scripts', 'images', 'nunjucks']);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// The default task (called when you run `gulp` from cli)
|
||||
gulp.task('default', function(callback) {
|
||||
sequencer(
|
||||
'clean:dev',
|
||||
['sprites', 'lint:js', 'lint:scss'],
|
||||
['sass', 'nunjucks'],
|
||||
['syncreload', 'testwatch'],
|
||||
callback
|
||||
)
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// function errorHandler(err) {
|
||||
// // Logs out error in the command line
|
||||
// console.log(err.toString());
|
||||
// // Ends the current pipe, so Gulp watch doesn't break
|
||||
// this.emit('end');
|
||||
// }
|
||||
|
||||
function plumbError(errTitle) {
|
||||
return plumber({
|
||||
errorHandler: notify.onError({
|
||||
// Customizing error title
|
||||
title: errTitle || "Error running Gulp",
|
||||
message: "Error: <%= error.message %>",
|
||||
sound: true
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
// gulp.watch(source.watch, ['overwatch']);
|
||||
gulp.watch(source.watch, ['styles', 'nunjucks']).on('change', browsersync.reload);
|
||||
// gulp.watch(source.images, ['images']);
|
||||
});
|
||||
|
||||
// The default task (called when you run `gulp` from cli)
|
||||
gulp.task('olddefault', ['clean', 'styles', 'scripts', 'images', 'nunjucks']);
|
||||
|
||||
gulp.task('default', function(callback) {
|
||||
sequencer(
|
||||
'clean:dev',
|
||||
['sprites', 'lint:js', 'lint:scss'],
|
||||
['test', 'testnunjucks'],
|
||||
['testsync', 'testwatch'],
|
||||
callback
|
||||
)
|
||||
});
|
||||
|
||||
|
||||
|
||||
// function errorHandler(err) {
|
||||
// // Logs out error in the command line
|
||||
// console.log(err.toString());
|
||||
// // Ends the current pipe, so Gulp watch doesn't break
|
||||
// this.emit('end');
|
||||
// }
|
||||
|
||||
function plumbError(errTitle) {
|
||||
return plumber({
|
||||
errorHandler: notify.onError({
|
||||
// Customizing error title
|
||||
title: errTitle || "Error running Gulp",
|
||||
message: "Error: <%= error.message %>",
|
||||
sound: true
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue