Created
December 5, 2017 11:23
-
-
Save mmanylov-zz/b6ead173ddcab8330cd35ae7562d2a41 to your computer and use it in GitHub Desktop.
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
'use strict'; | |
var gulp = require('gulp'); | |
var sass = require('gulp-sass'); | |
var browserSync = require('browser-sync').create(); | |
var header = require('gulp-header'); | |
var cleanCSS = require('gulp-clean-css'); | |
var rename = require("gulp-rename"); | |
var uglify = require('gulp-uglify'); | |
var pkg = require('./package.json'); | |
var sourcemaps = require('gulp-sourcemaps'); | |
var $ = require('gulp-load-plugins')(); | |
// Set the banner content | |
var banner = ['/*!\n', | |
' * Start Bootstrap - <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n', | |
' * Copyright 2013-' + (new Date()).getFullYear(), ' <%= pkg.author %>\n', | |
' * Licensed under <%= pkg.license %> (https://github.com/BlackrockDigital/<%= pkg.name %>/blob/master/LICENSE)\n', | |
' */\n', | |
'' | |
].join(''); | |
// Compiles SCSS files from /scss into /css | |
gulp.task('sass', function () { | |
const AUTOPREFIXER_BROWSERS = [ | |
'ie >= 10', | |
'ie_mob >= 10', | |
'ff >= 30', | |
'chrome >= 34', | |
'safari >= 7', | |
'opera >= 23', | |
'ios >= 7', | |
'android >= 4.4', | |
'bb >= 10' | |
]; | |
return gulp.src('scss/creative.scss') | |
.pipe(sourcemaps.init()) | |
.pipe(sass().on('error', sass.logError)) | |
.pipe(sourcemaps.write()) | |
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) | |
.pipe(header(banner, { | |
pkg: pkg | |
})) | |
.pipe($.size({ | |
title: 'styles' | |
})) | |
.pipe(gulp.dest('css')) | |
.pipe(browserSync.reload({ | |
stream: true | |
})) | |
}); | |
// Minify compiled CSS | |
gulp.task('minify-css', ['sass'], function () { | |
return gulp.src('css/creative.css') | |
.pipe(cleanCSS({ | |
compatibility: 'ie8' | |
})) | |
.pipe(rename({ | |
suffix: '.min' | |
})) | |
.pipe(gulp.dest('css')) | |
.pipe(browserSync.reload({ | |
stream: true | |
})) | |
}); | |
// Minify custom JS | |
gulp.task('minify-js', function () { | |
return gulp.src('js/creative.js') | |
.pipe(uglify()) | |
.pipe(header(banner, { | |
pkg: pkg | |
})) | |
.pipe(rename({ | |
suffix: '.min' | |
})) | |
.pipe(gulp.dest('js')) | |
.pipe(browserSync.reload({ | |
stream: true | |
})) | |
}); | |
// Copy vendor files from /node_modules into /vendor | |
// NOTE: requires `npm install` before running! | |
gulp.task('copy', function () { | |
gulp.src([ | |
'node_modules/bootstrap/dist/**/*', | |
'!**/npm.js', | |
'!**/bootstrap-theme.*', | |
'!**/*.map' | |
]) | |
.pipe(gulp.dest('vendor/bootstrap')) | |
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js']) | |
.pipe(gulp.dest('vendor/jquery')) | |
gulp.src(['node_modules/magnific-popup/dist/*']) | |
.pipe(gulp.dest('vendor/magnific-popup')) | |
gulp.src(['node_modules/scrollreveal/dist/*.js']) | |
.pipe(gulp.dest('vendor/scrollreveal')) | |
gulp.src(['node_modules/popper.js/dist/umd/popper.js', 'node_modules/popper.js/dist/umd/popper.min.js']) | |
.pipe(gulp.dest('vendor/popper')) | |
gulp.src(['node_modules/jquery.easing/*.js']) | |
.pipe(gulp.dest('vendor/jquery-easing')) | |
gulp.src(['node_modules/aos/dist/*.js', 'node_modules/aos/dist/*.css']) | |
.pipe(gulp.dest('vendor/aos')) | |
gulp.src([ | |
'node_modules/font-awesome/**', | |
'!node_modules/font-awesome/**/*.map', | |
'!node_modules/font-awesome/.npmignore', | |
'!node_modules/font-awesome/*.txt', | |
'!node_modules/font-awesome/*.md', | |
'!node_modules/font-awesome/*.json' | |
]) | |
.pipe(gulp.dest('vendor/font-awesome')) | |
}) | |
// Default task | |
gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']); | |
// Configure the browserSync task | |
gulp.task('browserSync', function () { | |
browserSync.init({ | |
server: { | |
baseDir: '' | |
}, | |
}) | |
}) | |
// Dev task with browserSync | |
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js'], function () { | |
gulp.watch('scss/*.scss', ['sass']); | |
gulp.watch('css/*.css', ['minify-css']); | |
gulp.watch('js/*.js', ['minify-js']); | |
// Reloads the browser whenever HTML or JS files change | |
gulp.watch('*.html', browserSync.reload); | |
gulp.watch('js/**/*.js', browserSync.reload); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment