Skip to content

Instantly share code, notes, and snippets.

@afalchi82
Created January 15, 2018 08:58
Show Gist options
  • Save afalchi82/d7c914f2862a55ec8a53f557cb8b3329 to your computer and use it in GitHub Desktop.
Save afalchi82/d7c914f2862a55ec8a53f557cb8b3329 to your computer and use it in GitHub Desktop.
Gulpfile for static Bootstrap website
/* ----------------------------------------------------
Common commands
gulp dev
gulp custom-bootstrap
gulp copy-vendors
---------------------------------------------------- */
/* ----------------------------------------------------
Requires
---------------------------------------------------- */
const gulp = require('gulp'),
sass = require('gulp-sass'),
data = require('gulp-data'),
stylus = require('gulp-stylus'),
sourcemaps = require('gulp-sourcemaps'),
babel = require('gulp-babel'),
webserver = require('gulp-webserver'),
concat = require('gulp-concat'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create()
;
/* ----------------------------------------------------
Sass
---------------------------------------------------- */
gulp.task('sass', () => {
return gulp.src('src/css/sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
;
});
/* ----------------------------------------------------
Custom bootstrap
---------------------------------------------------- */
gulp.task('custom-bootstrap', () => {
return gulp.src('src/css/bootstrap/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(postcss([autoprefixer]))
.pipe(sourcemaps.write('css'))
.pipe(gulp.dest('dist/css/bootstrap'))
;
});
/* ----------------------------------------------------
Stylus
---------------------------------------------------- */
gulp.task('stylus', () => {
return gulp.src('src/css/styl/**/!(_*.styl)')
.pipe(sourcemaps.init())
.pipe(stylus())
.pipe(postcss([
autoprefixer({ browsers: ['last 2 versions'] })])
)
.pipe(sourcemaps.write('css'))
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream())
// gulp.watch("app/*.html").on('change', browserSync.reload);
;
});
/* ----------------------------------------------------
Babel
---------------------------------------------------- */
gulp.task('babel', () => {
return gulp
.src('src/js/**/*.js')
// .pipe(sourcemaps.init())
.pipe(babel({
// plugins: ['transform-runtime'],
presets: ['env']
}))
// .pipe(concat('main.js'))
// .pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream())
;
});
/* ----------------------------------------------------
Webserver
---------------------------------------------------- */
gulp.task('webserver', function() {
gulp.src('./')
.pipe(webserver({
fallback: 'index.html',
livereload: true,
directoryListing: true,
port: 8080,
open: 'http://localhost:8080/dist/index.html'
}));
});
/* ----------------------------------------------------
Copy vendor files from /node_modules into /vendor
---------------------------------------------------- */
gulp.task('copy-vendors', function() {
// [ folder, /Subfolder to include]
const folders = [
['animate.css', '/'],
['bootstrap', '/dist'],
['font-awesome', ''],
['hamburgers', '/dist'],
['jquery', '/dist'],
['scrollreveal', '/dist'],
['slick-carousel', '/slick'],
['vue', '/dist'],
];
// [ folder, filename ]
const files = [
['lodash', 'lodash.min.js'],
['rellax', 'rellax.min.js'],
];
folders.forEach( item => {
gulp
.src([`node_modules/${item[0] + (item[1] || '')}/**/*`])
.pipe(gulp.dest(`dist/vendor/${item[0] + (item[1] || '')}`))
;
});
files.forEach( item => {
gulp
.src([`node_modules/${item[0]}/${item[1]}`])
.pipe(gulp.dest(`dist/vendor/${item[0]}`))
;
});
});
/* ----------------------------------------------------
Browser Sync
---------------------------------------------------- */
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: '/dist'
},
})
});
/* ----------------------------------------------------
Watch
---------------------------------------------------- */
gulp.task('watch', () => {
// gulp.watch('css/sass/**/*.scss', ['sass']);
gulp.watch('src/css/styl/**/*.styl', ['stylus']);
gulp.watch('src/js/**/*.js', ['babel']);
});
/* ----------------------------------------------------
Static Server + watching files
---------------------------------------------------- */
gulp.task('dev', ['stylus'], function() {
browserSync.init({
server: "./dist"
});
gulp.watch('src/css/styl/**/*.styl', ['stylus']);
gulp.watch('src/js/**/*.js', ['babel']);
gulp.watch("dist/*.html").on('change', browserSync.reload);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment