Skip to content

Instantly share code, notes, and snippets.

@ar-to
Last active April 1, 2018 03:30
Show Gist options
  • Save ar-to/82b86701bd6b6ef51495be09267f5c9f to your computer and use it in GitHub Desktop.
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!
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']);
});
{
"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