-
-
Save steffen-wirth/65d54d1088715390bb715a3cda6e61be to your computer and use it in GitHub Desktop.
(Gulp 4) Basic gulpfile front-end starter kit
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
// ----- Gulp ----- // | |
// Compiles sass with sourcemaps, combines js, prefix-free styles, live reloads browser | |
// cd into your project and run 'gulp' | |
// compiles sass | |
// combines js | |
// prefix-free styles | |
// live reloads browser | |
var gulp = require('gulp'), | |
// No more -vendor-prefixes- :) | |
autoprefixer = require('gulp-autoprefixer'), | |
autoprefixerOptions = { | |
browsers: ['last 2 versions', '> 5%', 'Firefox ESR'] | |
}, | |
// Combine js files into one | |
concat = require('gulp-concat'), | |
// Inject stylesBuild/js into browser without refreshing | |
livereload = require('gulp-livereload'), | |
// Rename the js file after its combined | |
rename = require('gulp-rename'), | |
// Sass | |
sass = require('gulp-sass'), | |
sassOptions = { | |
errLogToConsole: true, | |
outputStyle: 'expanded' | |
}, | |
// Sourcemaps to show where lines of sass are from compiled css | |
sourcemaps = require('gulp-sourcemaps'), | |
// Uglify the js and save a bunch on bytez | |
uglify = require('gulp-uglify'), | |
// Paths & Directories | |
paths = { | |
js: ['./static/public/js/build/libs/*.js', './static/public/js/build/libs/*/*.js', './static/public/js/build/scripts/*.js'], | |
jsBuild: './static/public/js/', // this is where the minified and concat'd project js build file will go | |
styles: ['./static/public/css/*.scss', './static/public/css/partials/*.scss'], // watch these directories | |
stylesBuild: './static/public/css/' // this is where the minified, compiled css will go | |
}; | |
// ----- Scripts ----- // | |
// Concat, Rename, Uglify | |
gulp.task('build-js', function() { | |
gulp.src(paths.js) | |
.pipe(concat('all.js')) | |
.pipe(gulp.dest(paths.jsBuild)) | |
.pipe(rename('all.min.js')) | |
.pipe(uglify()) | |
.on('error', logError) | |
.pipe(gulp.dest(paths.jsBuild)) | |
.pipe(livereload({ start: true })) | |
}); | |
// ----- Styles ----- // | |
// Compile css from sass | |
gulp.task('build-styles', function () { | |
gulp.src(paths.styles) | |
.pipe(sourcemaps.init()) | |
// Run Sass on those files | |
.pipe(sass(sassOptions)) | |
// We need those sass line numbers | |
.pipe(sourcemaps.write()) | |
.on('error', logError) | |
// Autoprefixer :) | |
.pipe(autoprefixer(autoprefixerOptions)) | |
// Write the resulting CSS in the output folder | |
.pipe(gulp.dest(paths.stylesBuild)) | |
.pipe(livereload({ start: true })) | |
}); | |
// ----- Watch Files ----- // | |
// Watch Files For Changes (Scripts and Styles) | |
gulp.task('watch', function() { | |
livereload.listen() | |
gulp.watch(paths.js, ['build-js']) | |
gulp.watch(paths.styles, ['build-styles']) | |
.on('change', function(event) { | |
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...') | |
}) | |
}); | |
// ----- Default Task ----- // | |
// Run from command line with: gulp | |
gulp.task('default', gulp.series('build-js', 'build-styles', 'watch')); | |
// ----- Errors ----- // | |
var logError = function(error) { | |
console.log(error.toString()); | |
this.emit('end'); | |
}; |
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
{ | |
"name": "front-end-starter-kit", | |
"version": "0.0.1", | |
"description": "Front-end starter-kit: watches/combines/uglifies js/sass", | |
"main": "gulpfile.js", | |
"devDependencies": { | |
"gulp": "gulpjs/gulp#4.0", | |
"gulp-autoprefixer": "^3.1.0", | |
"gulp-concat": "^2.5.0", | |
"gulp-livereload": "^3.8.1", | |
"gulp-rename": "^1.2.0", | |
"gulp-sass": "^2.0.4", | |
"gulp-sourcemaps": "^1.6.0", | |
"gulp-uglify": "^1.1.0" | |
}, | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"author": "antwon", | |
"license": "ISC" | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment