Created
January 30, 2019 16:42
-
-
Save webfacer/7746125422b24672751effb3c84e30d7 to your computer and use it in GitHub Desktop.
gulpfile configuration for nunjucks and scss. also you can use npm run start for dev-enviorment or npm run build:prod which will minify your data for production
This file contains hidden or 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
require('es6-promise').polyfill(); | |
'use strict'; | |
var gulp = require('gulp'); | |
var sass = require('gulp-sass'); | |
var sourcemaps = require('gulp-sourcemaps'); | |
var autoprefixer = require('gulp-autoprefixer'); | |
var uglify = require('gulp-uglify'); | |
var jshint = require('gulp-jshint'); | |
var jslint = require('gulp-jslint'); | |
var jsinclude = require('gulp-include'); | |
var concat = require('gulp-concat'); | |
var del = require('del'); | |
var order = require('gulp-order'); | |
var nunjucksRender = require('gulp-nunjucks-render'); | |
var htmlmin = require('gulp-htmlmin'); | |
var htmlhint = require("gulp-htmlhint"); | |
var bases = { | |
source: 'src/', | |
dist: 'dist/', | |
node_modules: 'node_modules/', | |
sourcemap: 'maps/' | |
}; | |
var paths = { | |
scripts: [ | |
bases.source + 'js/index.js', | |
bases.source + 'js/all.js' | |
], | |
styles: [ | |
bases.source + 'scss/style.scss' | |
], | |
html: [ '**/*.nunjucks' ], | |
fonts: [ | |
bases.source + 'fonts/**', | |
], | |
images: [ | |
bases.source + 'images/**', | |
] | |
}; | |
var production = false; | |
gulp.task('clean', function() { | |
return del([ | |
bases.dist, | |
'./npm-debug.log' | |
]); | |
}); | |
gulp.task('sass', function () { | |
var sassOptions; | |
var t = gulp.src(paths.styles) | |
.pipe(sourcemaps.init()) | |
.pipe(sass.sync().on('error', sass.logError)); | |
if (production) { | |
sassOptions = {outputStyle: 'comporessed'}; | |
} | |
t=t.pipe(sass(sassOptions).on('error', sass.logError)); | |
if (production) { | |
t=t.pipe(autoprefixer({ | |
browsers: ['IE>=11', 'iOS >=8', 'android >=4.4', 'last 3 version'] | |
})); | |
} | |
return t.pipe(sourcemaps.write(bases.sourcemap)) | |
.pipe(gulp.dest(bases.dist)); | |
}); | |
gulp.task('javascript', function() { | |
var t = gulp.src(paths.scripts) | |
.pipe(jsinclude({ | |
extensions: "js", | |
hardFail: true, | |
includePaths: [ | |
__dirname + "/node_modules", | |
__dirname + "/src/js" | |
] | |
})) | |
.on('error', console.log) | |
.pipe(order(paths.scripts, { base: './' })) | |
.pipe(sourcemaps.init()); | |
if(production) { | |
t=t.pipe(uglify({ | |
output: { beautify: false } | |
})); | |
} | |
t=t.pipe(concat('all.js')) | |
.pipe(sourcemaps.write('.', { | |
includeContent:false | |
})) | |
.pipe(gulp.dest(bases.dist + 'js/')); | |
return t; | |
}); | |
gulp.task('javascript:lint', function() { | |
return gulp.src(paths.scripts) | |
.pipe(jslint()) | |
.pipe(jslint.reporter('default')); | |
}); | |
gulp.task('javascript:hint', function() { | |
return gulp.src(paths.scripts) | |
.pipe(jshint()) | |
.pipe(jshint.reporter('default')); | |
}); | |
gulp.task('nunjucks', function () { | |
nunjucksRender.nunjucks.configure([bases.source]); | |
var t = gulp.src(bases.source + '*.nunjucks') | |
.pipe(nunjucksRender()) | |
.pipe(htmlhint()) | |
.pipe(htmlhint.reporter()); | |
if(production) { | |
t=t.pipe(htmlmin({ collapseWhitespace: true })); | |
} | |
t=t.pipe(gulp.dest(bases.dist)); | |
return t; | |
}); | |
gulp.task('fonts', function() { | |
return gulp.src(paths.fonts) | |
.pipe(gulp.dest(bases.dist + 'fonts/')); | |
}); | |
gulp.task('images', function() { | |
return gulp.src(paths.images) | |
.pipe(gulp.dest(bases.dist + 'img/')); | |
}); | |
var tinylr; | |
gulp.task('livereload', function() { | |
tinylr = require('tiny-lr')(); | |
tinylr.listen(35729); | |
}); | |
function notifyLiveReload(event) { | |
var fileName = require('path').relative(__dirname, event.path); | |
tinylr.changed({ | |
body: { | |
files: [fileName] | |
} | |
}); | |
} | |
gulp.task('watch', function() { | |
gulp.watch(bases.source + 'css/*.css', ['sass']); | |
gulp.watch(bases.source + 'scss/*.scss', ['sass']); | |
gulp.watch(bases.source + 'js/*.js', ['javascript']); | |
gulp.watch(bases.source + '**/*.html', ['nunjucks']); | |
gulp.watch(bases.source + '**/*.nunjucks', ['nunjucks']); | |
gulp.watch(bases.dist + '**/*', notifyLiveReload); | |
}); | |
gulp.task('express', function () { | |
var express = require('express'); | |
var app = express(); | |
app.get('/hello', function(req, res) { | |
res.send({ message: 'world' }); | |
}); | |
app.get('/hello.json', function(req, res) { | |
res.json({ message: 'world' }); | |
}); | |
app.use(require('connect-livereload')({port: 35729})); | |
app.use(express.static(bases.dist)); | |
app.use(function(req, res, next) { | |
res.status(404).send('Sorry cant find that!'); | |
}); | |
app.use(function(err, req, res, next) { | |
console.error(err.stack); | |
res.status(500).send('Something broke!'); | |
}); | |
app.listen(4000, '0.0.0.0'); | |
}); | |
gulp.task('set-env-production', function() { | |
production = true; | |
}); | |
gulp.task('default', ['sass', 'javascript', 'nunjucks', 'fonts', 'images', 'livereload', 'express', 'watch']); | |
gulp.task('build:dist', ['sass', 'javascript', 'nunjucks', 'fonts', 'images']); | |
gulp.task('build:prod', ['set-env-production', 'build:dist']); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment