Created
March 17, 2019 00:49
-
-
Save aosmichenko/7db099af4c80664a4686d83aff09379e to your computer and use it in GitHub Desktop.
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
| 'use strict'; | |
| /**************** gulpfile.js configuration ****************/ | |
| const | |
| // directory locations | |
| dir = { | |
| nm: '../../../node_modules/', | |
| theme: '.', | |
| src: 'assets/src/', | |
| build: 'assets/dist/' | |
| }, | |
| url = 'http://wp.test', | |
| // modules | |
| gulp = require( 'gulp' ), | |
| newer = require( 'gulp-newer' ), | |
| size = require( 'gulp-size' ), | |
| imagemin = require( 'gulp-imagemin' ), | |
| sass = require( 'gulp-sass' ), | |
| babel = require('gulp-babel'), | |
| postcss = require( 'gulp-postcss' ), | |
| sassGlob = require( 'gulp-sass-glob' ), | |
| sourcemaps = require( 'gulp-sourcemaps' ), | |
| rename = require( 'gulp-rename' ), | |
| jshint = require( 'gulp-jshint' ), | |
| uglify = require( 'gulp-uglify' ), | |
| concat = require( 'gulp-concat' ), | |
| plumber = require( 'gulp-plumber' ), | |
| criticalCss = require('gulp-penthouse'), | |
| sanitise = require('gulp-penthouse'), | |
| browsersync = require( 'browser-sync' ).create(); | |
| // Default error handler | |
| const onError = function( err ) { | |
| console.log( 'An error occured:', err.message ); | |
| this.emit( 'end' ); | |
| }; | |
| /**************** images task ****************/ | |
| const imgConfig = { | |
| src: dir.src + 'img/**/*', | |
| build: dir.build + 'img/', | |
| minOpts: { | |
| optimizationLevel: 5 | |
| } | |
| }; | |
| function images() { | |
| return gulp.src( imgConfig.src ) | |
| .pipe( newer( imgConfig.build ) ) | |
| .pipe( imagemin( imgConfig.minOpts ) ) | |
| .pipe( size( {showFiles: true} ) ) | |
| .pipe( gulp.dest( imgConfig.build ) ); | |
| } | |
| /**************** CSS task ****************/ | |
| const cssConfig = { | |
| src: [dir.src + 'scss/main.scss', dir.src + 'scss/login.scss'], | |
| watch: dir.src + 'scss/**/*', | |
| build: dir.build + 'css/', | |
| main: dir.build + 'css/main.min.css', | |
| sassOpts: { | |
| sourceMap: true, | |
| outputStyle: 'nested', | |
| imagePath: '/img/', | |
| precision: 3, | |
| errLogToConsole: true, | |
| includePaths: [ | |
| dir.nm | |
| ] | |
| }, | |
| postCSS: [ | |
| require( 'autoprefixer' )( { | |
| browsers: ['> 1%'] | |
| } ), | |
| require( 'cssnano' ) | |
| ] | |
| }; | |
| function styles() { | |
| return gulp.src( cssConfig.src ) | |
| .pipe( plumber() ) | |
| .pipe( sourcemaps.init() ) | |
| .pipe( sassGlob() ) | |
| .pipe( sass( cssConfig.sassOpts ).on( 'error', sass.logError ) ) | |
| .pipe( postcss( cssConfig.postCSS ) ) | |
| .pipe( sourcemaps.write() ) | |
| .pipe( size( {showFiles: true} ) ) | |
| .pipe( rename( { suffix: '.min' } ) ) | |
| .pipe( gulp.dest( cssConfig.build ) ) | |
| .pipe( browsersync.reload( {stream: true} ) ); | |
| } | |
| function critCss() { | |
| return gulp.src( cssConfig.main ) | |
| .pipe(criticalCss({ | |
| out: '/critical.php', // output file name | |
| url: url, // url from where we want penthouse to extract critical styles | |
| width: 1400, // max window width for critical media queries | |
| height: 900, // max window height for critical media queries | |
| userAgent: 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)' // pretend to be googlebot when grabbing critical page styles. | |
| })) | |
| .pipe(gulp.dest(dir.theme)); // destination folder for the output file | |
| } | |
| /**************** JS task ****************/ | |
| const jsConfig = { | |
| src: [dir.src + 'js/libs/*.js', dir.src + 'js/custom/*.js'], | |
| srcLibs: dir.src + 'js/libs/*.js', | |
| lintSrc: dir.src + 'js/custom/*.js', | |
| watch: dir.src + 'js/**/*', | |
| build: dir.build + 'js/' | |
| }; | |
| // Jshint outputs any kind of javascript problems you might have | |
| // Only checks javascript files inside /src directory | |
| function jsHint() { | |
| return gulp.src( jsConfig.lintSrc ) | |
| .pipe( jshint( '.jshintrc' ) ) | |
| .pipe( jshint.reporter( 'jshint-stylish' ) ) | |
| .pipe( jshint.reporter( 'fail' ) ); | |
| } | |
| function js() { | |
| return gulp.src( jsConfig.src ) | |
| .pipe(sourcemaps.init()) | |
| .pipe(babel({ | |
| presets: [ | |
| [ | |
| "@babel/preset-env", | |
| { | |
| targets: "> 0.25%, not dead" | |
| } | |
| ] | |
| ] | |
| })) | |
| .pipe( concat( 'app.js' ) ) | |
| .pipe( gulp.dest( jsConfig.build ) ) | |
| .pipe( uglify() ) | |
| .pipe( rename( { suffix: '.min' } ) ) | |
| .pipe( sourcemaps.write() ) | |
| .pipe( gulp.dest( jsConfig.build ) ) | |
| .pipe(browsersync.reload({stream: true})); | |
| } | |
| /**************** browser-sync task ****************/ | |
| const syncConfig = { | |
| proxy: { | |
| target: url | |
| }, | |
| port: 8000, | |
| files: [ | |
| './**/*.php' | |
| ], | |
| open: false | |
| }; | |
| // browser-sync | |
| function bs() { | |
| return browsersync.init( syncConfig ); | |
| } | |
| /**************** watch task ****************/ | |
| function watchjs() { | |
| gulp.watch(jsConfig.watch, jsHint); | |
| gulp.watch(jsConfig.watch, js); | |
| } | |
| function watchcss() { | |
| gulp.watch(cssConfig.watch, styles); | |
| } | |
| var start = gulp.parallel(styles, js, bs, watchcss, watchjs); | |
| exports.styles = styles; | |
| exports.critCss = critCss; | |
| exports.images = images; | |
| exports.jsHint = jsHint; | |
| exports.js = js; | |
| exports.bs = bs; | |
| exports.watchjs = watchjs; | |
| exports.watchcss = watchcss; | |
| exports.default = start; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment