Skip to content

Instantly share code, notes, and snippets.

@steffen-wirth
Forked from antwon/gulpfile.js
Created July 3, 2019 07:57
Show Gist options
  • Save steffen-wirth/65d54d1088715390bb715a3cda6e61be to your computer and use it in GitHub Desktop.
Save steffen-wirth/65d54d1088715390bb715a3cda6e61be to your computer and use it in GitHub Desktop.
(Gulp 4) Basic gulpfile front-end starter kit
// ----- 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');
};
{
"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