Last active
April 1, 2018 03:30
-
-
Save ar-to/82b86701bd6b6ef51495be09267f5c9f to your computer and use it in GitHub Desktop.
Gulpfile that watches for sass/js files and minifies them for production. Includes task for working with Bourbon (sass tool). Also has the package.json for installing dependancies. Tested!
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
var gulp = require('gulp'); | |
var $ = require('gulp-load-plugins')(); | |
var argv = require('yargs').argv; | |
var autoprefixer = require('gulp-autoprefixer'); | |
var sourcemaps = require('gulp-sourcemaps'); | |
var bourbon = require("bourbon").includePaths; | |
// Check for --production flag | |
var PRODUCTION = !!(argv.production); | |
// Browsers to target when prefixing CSS. | |
var COMPATIBILITY = ['last 2 versions', 'ie >= 9']; | |
// File paths to various assets are defined here. | |
var PATHS = { | |
//assets: [ | |
// 'src/assets/**/*', | |
// '!src/assets/{img,js,scss}/**/*' | |
//], | |
css: [ | |
// "bower_components/normalize-css/normalize.css", | |
// "bower_components/bootstrap/dist/css/bootstrap.min.css", | |
// "bower_components/lightbox2/dist/css/lightbox.min.css", | |
], | |
sass: [ | |
// 'bower_components', | |
// 'bower_components/foundation-sites/scss', | |
// 'bower_components/motion-ui/src/' | |
// 'sass/styles.scss' | |
], | |
javascript: [ | |
'src/js/**/*.js' | |
], | |
javascriptVerdors: [ | |
// 'bower_components/jquery/dist/jquery.js', | |
// Paths to individual JS components defined below | |
// 'bower_components/popper.js/dist/popper.min.js', | |
"bower_components/matchHeight/dist/jquery.matchHeight-min.js", | |
// 'src/assets/js/**/!(app).js', | |
// 'src/assets/js/app.js' | |
] | |
}; | |
// Combine JavaScript into one file | |
// In production, the file is minified | |
gulp.task('javascript', function() { | |
var uglify = $.if(PRODUCTION, $.uglify() | |
.on('error', function (e) { | |
console.log(e); | |
})); | |
return gulp.src(PATHS.javascript) | |
.pipe($.sourcemaps.init()) | |
.pipe($.babel( { | |
presets: ['es2015'] | |
})) | |
.pipe($.concat('main.js')) | |
.pipe(uglify) | |
.pipe($.if(!PRODUCTION, $.sourcemaps.write())) | |
.pipe(gulp.dest('js')); | |
}); | |
// copy files into a new dir | |
gulp.task('copy', () => gulp | |
.src('bower_components/popper.js/dist/popper.min.js') | |
.pipe(gulp.dest('../js')) | |
); | |
gulp.task('copyJS', () => gulp | |
.src(PATHS.javascriptVerdors) | |
// .src([ | |
// PATHS.javascript | |
// ]) | |
.pipe(gulp.dest('./js/vendor')) | |
); | |
// copy css from vendors | |
gulp.task('copyCSS', () => gulp | |
// .src('bower_components/normalize-css/.travis.yml') | |
.src(PATHS.css) | |
// .src([ | |
// PATHS.css, | |
// ]) | |
.pipe(gulp.dest('./assets/css/vendor')) | |
); | |
// Compile Sass into CSS. In production, the CSS is compressed | |
gulp.task('sass', function() { | |
// return gulp.src('src/sass/styles.scss') | |
return gulp.src('src/sass/main.scss') | |
.pipe($.sourcemaps.init()) | |
.pipe($.sass({ | |
includePaths: PATHS.sass | |
}) | |
.on('error', $.sass.logError)) | |
.pipe($.autoprefixer({ | |
browsers: COMPATIBILITY | |
})) | |
.pipe($.if(PRODUCTION, $.cssnano())) | |
.pipe($.if(!PRODUCTION, $.sourcemaps.write())) | |
.pipe(gulp.dest('css')); | |
}); | |
//faq sass | |
gulp.task('sass-faq', function() { | |
return gulp.src('faq/scss/style.scss') | |
.pipe($.sourcemaps.init()) | |
.pipe($.sass({ | |
includePaths: [PATHS.sass, bourbon] | |
}) | |
.on('error', $.sass.logError)) | |
.pipe($.autoprefixer({ | |
browsers: COMPATIBILITY | |
})) | |
.pipe($.if(PRODUCTION, $.cssnano())) | |
.pipe($.if(!PRODUCTION, $.sourcemaps.write())) | |
.pipe(gulp.dest('faq/css')); | |
}); | |
// Build the "dist" folder by running all of the above tasks | |
gulp.task('build', ['javascript','sass']); | |
gulp.task('build-faq', ['sass-faq']); | |
// gulp.task('build', ['javascript', 'sass']); | |
// gulp.task('build2', ['copy', 'sass']); | |
gulp.task('faq', ['sass-faq'], function() { | |
gulp.watch(['faq/scss/**/*.scss'], ['sass-faq']); | |
}); | |
gulp.task('default', ['copyJS','javascript','sass'], function() { | |
gulp.watch(['src/sass/**/*.scss'], ['sass']); | |
gulp.watch(['src/js/**/*.js'], ['javascript']); | |
}); |
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
{ | |
"name": "foundation-sites-template", | |
"version": "1.0.0", | |
"description": "Basic template for a new Bolt theme based on Zurb Foundation for Sites project.", | |
"main": "gulpfile.js", | |
"scripts": { | |
"start": "gulp", | |
"build": "gulp build --production", | |
"faq": "gulp faq", | |
"build-faq": "gulp build-faq --production", | |
"postinstall": "bower install" | |
}, | |
"author": "ar-to", | |
"license": "MIT", | |
"private": false, | |
"engineStrict": true, | |
"engines": { | |
"node": ">5.8", | |
"npm": ">3.7" | |
}, | |
"dependencies": { | |
"babel-preset-es2015": "^6.24.1", | |
"bourbon": "^5.0.0", | |
"bower": "^1.8.0", | |
"gulp": "^3.9.1", | |
"gulp-autoprefixer": "^4.0.0", | |
"gulp-babel": "^6.1.2", | |
"gulp-concat": "^2.6.1", | |
"gulp-cssnano": "^2.1.2", | |
"gulp-if": "^2.0.2", | |
"gulp-load-plugins": "^1.5.0", | |
"gulp-sass": "^3.1.0", | |
"gulp-sourcemaps": "^2.6.0", | |
"gulp-uglify": "^3.0.0", | |
"js-yaml": "^3.9.0", | |
"yargs": "^8.0.2" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment