This repository has been archived on 2020-05-08. You can view files and clone it, but cannot push or open issues or pull requests.
understrap/gulpfile.js

290 lines
10 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// Defining requirements
var gulp = require( 'gulp' );
var plumber = require( 'gulp-plumber' );
var sass = require( 'gulp-sass' );
var watch = require( 'gulp-watch' );
var cssnano = require( 'gulp-cssnano' );
var rename = require( 'gulp-rename' );
var concat = require( 'gulp-concat' );
var uglify = require( 'gulp-uglify' );
var merge2 = require( 'merge2' );
var imagemin = require( 'gulp-imagemin' );
var ignore = require( 'gulp-ignore' );
var rimraf = require( 'gulp-rimraf' );
var clone = require( 'gulp-clone' );
var merge = require( 'gulp-merge' );
var sourcemaps = require( 'gulp-sourcemaps' );
var browserSync = require( 'browser-sync' ).create();
var del = require( 'del' );
var cleanCSS = require( 'gulp-clean-css' );
var gulpSequence = require( 'gulp-sequence' );
var replace = require( 'gulp-replace' );
var autoprefixer = require( 'gulp-autoprefixer' );
// Configuration file to keep your code DRY
var cfg = require( './gulpconfig.json' );
var paths = cfg.paths;
// Run:
// gulp sass + cssnano + rename
// Prepare the min.css for production (with 2 pipes to be sure that "theme.css" == "theme.min.css")
gulp.task( 'scss-for-prod', function() {
var source = gulp.src( paths.sass + '/*.scss' )
.pipe( plumber({
errorHandler: function( err ) {
console.log( err );
this.emit( 'end' );
}
}) )
.pipe( sourcemaps.init({ loadMaps: true }) )
.pipe( sass() );
var pipe1 = source.pipe( clone() )
.pipe( sourcemaps.write( undefined, { sourceRoot: null } ) )
.pipe( gulp.dest( paths.css ) )
.pipe( rename( 'custom-editor-style.css' ) );
var pipe2 = source.pipe( clone() )
.pipe( minifycss() )
.pipe( rename( { suffix: '.min' } ) )
.pipe( gulp.dest( paths.css ) );
return merge( pipe1, pipe2 );
});
// Run:
// gulp sourcemaps + sass + reload(browserSync)
// Prepare the child-theme.css for the development environment
gulp.task( 'scss-for-dev', function() {
gulp.src( paths.sass + '/*.scss' )
.pipe( plumber( {
errorHandler: function( err ) {
console.log( err );
this.emit( 'end' );
}
} ) )
.pipe( sourcemaps.init({ loadMaps: true }) )
.pipe( sass() )
.pipe( sourcemaps.write( undefined, { sourceRoot: null } ) )
.pipe( gulp.dest( paths.css ) );
});
gulp.task( 'watch-scss', ['browser-sync'], function() {
gulp.watch( paths.sass + '/**/*.scss', ['scss-for-dev'] );
});
// Run:
// gulp sass
// Compiles SCSS files in CSS
gulp.task( 'sass', function() {
var stream = gulp.src( paths.sass + '/*.scss' )
.pipe( plumber( {
errorHandler: function( err ) {
console.log( err );
this.emit( 'end' );
}
} ) )
.pipe(sourcemaps.init({loadMaps: true}))
.pipe( sass( { errLogToConsole: true } ) )
.pipe( autoprefixer( 'last 2 versions' ) )
.pipe(sourcemaps.write(undefined, { sourceRoot: null }))
.pipe( gulp.dest( paths.css ) )
return stream;
});
// Run:
// gulp watch
// Starts watcher. Watcher runs gulp sass task on changes
gulp.task( 'watch', function() {
gulp.watch( paths.sass + '/**/*.scss', ['styles'] );
gulp.watch( [paths.dev + '/js/**/*.js', 'js/**/*.js', '!js/theme.js', '!js/theme.min.js'], ['scripts'] );
//Inside the watch task.
gulp.watch( paths.imgsrc + '/**', ['imagemin-watch'] );
});
/**
* Ensures the 'imagemin' task is complete before reloading browsers
* @verbose
*/
gulp.task( 'imagemin-watch', ['imagemin'], function( done ) {
browserSync.reload();
done();
});
// Run:
// gulp imagemin
// Running image optimizing task
gulp.task( 'imagemin', function() {
gulp.src( paths.imgsrc + '/**' )
.pipe( imagemin() )
.pipe( gulp.dest( paths.img ) );
});
// Run:
// gulp cssnano
// Minifies CSS files
gulp.task( 'cssnano', function() {
return gulp.src( paths.css + '/theme.css' )
.pipe( sourcemaps.init( { loadMaps: true } ) )
.pipe( plumber( {
errorHandler: function( err ) {
console.log( err );
this.emit( 'end' );
}
} ) )
.pipe( rename( { suffix: '.min' } ) )
.pipe( cssnano( { discardComments: { removeAll: true } } ) )
.pipe( sourcemaps.write( './' ) )
.pipe( gulp.dest( paths.css ) );
});
gulp.task( 'minifycss', function() {
return gulp.src( paths.css + '/theme.css' )
.pipe( sourcemaps.init( { loadMaps: true } ) )
.pipe( cleanCSS( { compatibility: '*' } ) )
.pipe( plumber( {
errorHandler: function( err ) {
console.log( err ) ;
this.emit( 'end' );
}
} ) )
.pipe( rename( { suffix: '.min' } ) )
.pipe( sourcemaps.write( './' ) )
.pipe( gulp.dest( paths.css ) );
});
gulp.task( 'cleancss', function() {
return gulp.src( paths.css + '/*.min.css', { read: false } ) // Much faster
.pipe( ignore( 'theme.css' ) )
.pipe( rimraf() );
});
gulp.task( 'styles', function( callback ) {
gulpSequence( 'sass', 'minifycss' )( callback );
} );
// Run:
// gulp browser-sync
// Starts browser-sync task for starting the server.
gulp.task( 'browser-sync', function() {
browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );
} );
// Run:
// gulp watch-bs
// Starts watcher with browser-sync. Browser-sync reloads page automatically on your browser
gulp.task( 'watch-bs', ['browser-sync', 'watch', 'scripts'], function() {
} );
// Run:
// gulp scripts.
// Uglifies and concat all JS files into one
gulp.task( 'scripts', function() {
var scripts = [
// Start - All BS4 stuff
paths.dev + '/js/bootstrap4/bootstrap.js',
// End - All BS4 stuff
paths.dev + '/js/skip-link-focus-fix.js',
// Adding currently empty javascript file to add on for your own themes´ customizations
// Please add any customizations to this .js file only!
paths.dev + '/js/custom-javascript.js'
];
gulp.src( scripts )
.pipe( concat( 'theme.min.js' ) )
.pipe( uglify() )
.pipe( gulp.dest( paths.js ) );
gulp.src( scripts )
.pipe( concat( 'theme.js' ) )
.pipe( gulp.dest( paths.js ) );
});
// Deleting any file inside the /src folder
gulp.task( 'clean-source', function() {
return del( ['src/**/*'] );
});
// Run:
// gulp copy-assets.
// Copy all needed dependency assets files from bower_component assets to themes /js, /scss and /fonts folder. Run this task after bower install or bower update
////////////////// All Bootstrap SASS Assets /////////////////////////
gulp.task( 'copy-assets', function() {
////////////////// All Bootstrap 4 Assets /////////////////////////
// Copy all JS files
var stream = gulp.src( paths.node + 'bootstrap/dist/js/**/*.js' )
.pipe( gulp.dest( paths.dev + '/js/bootstrap4' ) );
// Copy all Bootstrap SCSS files
gulp.src( paths.node + 'bootstrap/scss/**/*.scss' )
.pipe( gulp.dest( paths.dev + '/sass/bootstrap4' ) );
////////////////// End Bootstrap 4 Assets /////////////////////////
// Copy all Font Awesome Fonts
gulp.src( paths.node + 'font-awesome/fonts/**/*.{ttf,woff,woff2,eot,svg}' )
.pipe( gulp.dest( './fonts' ) );
// Copy all Font Awesome SCSS files
gulp.src( paths.node + 'font-awesome/scss/*.scss' )
.pipe( gulp.dest( paths.dev + '/sass/fontawesome' ) );
// _s SCSS files
gulp.src( paths.node + 'undescores-for-npm/sass/media/*.scss' )
.pipe( gulp.dest( paths.dev + '/sass/underscores' ) );
// _s JS files into /src/js
gulp.src( paths.node + 'undescores-for-npm/js/skip-link-focus-fix.js' )
.pipe( gulp.dest( paths.dev + '/js' ) );
// _s JS files into /js
gulp.src( paths.node + 'undescores-for-npm/js/skip-link-focus-fix.js' )
.pipe( gulp.dest( paths.js + paths.vendor ) );
// Copy Popper JS files
gulp.src( paths.node + 'popper.js/dist/umd/popper.min.js' )
.pipe( gulp.dest( paths.js + paths.vendor ) );
gulp.src( paths.node + 'popper.js/dist/umd/popper.js' )
.pipe( gulp.dest( paths.js + paths.vendor ) );
return stream;
});
// Deleting the files distributed by the copy-assets task
gulp.task( 'clean-vendor-assets', function() {
return del( [paths.dev + '/js/bootstrap4/**', paths.dev + '/sass/bootstrap4/**', './fonts/*wesome*.{ttf,woff,woff2,eot,svg}', paths.dev + '/sass/fontawesome/**', paths.dev + '/sass/underscores/**', paths.dev + '/js/skip-link-focus-fix.js', paths.js + '/**/skip-link-focus-fix.js', paths.js + '/**/popper.min.js', paths.js + '/**/popper.js', ( paths.vendor !== ''?( paths.js + paths.vendor + '/**' ):'' )] );
});
// Run
// gulp dist
// Copies the files to the /dist folder for distribution as simple theme
gulp.task( 'dist', ['clean-dist'], function() {
return gulp.src( ['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dev, '!' + paths.dev + '/**', '!' + paths.dist, '!' + paths.dist + '/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '!' + paths.sass, '!' + paths.sass + '/**', '!readme.txt', '!readme.md', '!package.json', '!package-lock.json', '!gulpfile.js', '!gulpconfig.json', '!CHANGELOG.md', '!.travis.yml', '!jshintignore', '!codesniffer.ruleset.xml', '*'], { 'buffer': false } )
.pipe( replace( '/js/jquery.slim.min.js', '/js' + paths.vendor + '/jquery.slim.min.js', { 'skipBinary': true } ) )
.pipe( replace( '/js/popper.min.js', '/js' + paths.vendor + '/popper.min.js', { 'skipBinary': true } ) )
.pipe( replace( '/js/skip-link-focus-fix.js', '/js' + paths.vendor + '/skip-link-focus-fix.js', { 'skipBinary': true } ) )
.pipe( gulp.dest( paths.dist ) );
});
// Deleting any file inside the /dist folder
gulp.task( 'clean-dist', function() {
return del( [paths.dist + '/**'] );
});
// Run
// gulp dist-product
// Copies the files to the /dist-prod folder for distribution as theme with all assets
gulp.task( 'dist-product', ['clean-dist-product'], function() {
return gulp.src( ['**/*', '!' + paths.bower, '!' + paths.bower + '/**', '!' + paths.node, '!' + paths.node + '/**', '!' + paths.dist, '!' + paths.dist +'/**', '!' + paths.distprod, '!' + paths.distprod + '/**', '*'] )
.pipe( gulp.dest( paths.distprod ) );
} );
// Deleting any file inside the /dist-product folder
gulp.task( 'clean-dist-product', function() {
return del( [paths.distprod + '/**'] );
} );