I am having one issue (maybe simple, maybe not) with gulp, every time I run elixir tasks the output looks like so:
.......(way to many lines to included here)......
[16:06:46] Starting 'default'...
┌────────────────────┬─────────┬──────────────┬─────────────┐
│ Task │ Summary │ Source Files │ Destination │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.runShell() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.sassy() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.sassy() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.sassy() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.sassy() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.sassy() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.delete() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.blueMountain() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.sassy() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.sassy() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.sassy() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.minifyJs() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.copyFiles() │ │
├────────────────────┼─────────┼──────────────┼─────────────┤
│ mix.minifyJs() │ │
└────────────────────┴─────────┴──────────────┴─────────────┘
[16:06:46] Finished 'default' after 16 ms
I don't know why it does look like that. I saw many examples online that they have a full filled output but for some reason, im my case, all the boxes are empty. I get all my files on the right place and everything else is working great so it is not that bad, I just would like to have a more readable output (or just not print it at all) this is my gulp file const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('gulp-util');
require('laravel-elixir-livereload');
require('dotenv').config();
var path = require("path");
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var coffee = require('gulp-coffee');
var gutil = require('gulp-util');
var del = require('del');
var livereload = require('gulp-livereload');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');
var webpack = require('gulp-webpack');
var logger = require('gulp-logger');
var shell = require('gulp-shell');
var rootDir = __dirname;
var themeFolder = path.join(rootDir,'public_html/wp-content/themes/pbc2017');
var pluginMapFolder = path.join(rootDir,'public_html/wp-content/plugins/map-manager');
var pluginSpeedFolder = path.join(rootDir,'public_html/wp-content/plugins/speed-manager');
var resourceRoot = path.join(rootDir, 'resources');
var mapJsResourceFolder = path.join(resourceRoot, 'assets/js/map/');
var mapSassResourceFolder = path.join(resourceRoot, 'assets/sass/map/');
var speedJsResourceFolder = path.join(resourceRoot, 'assets/js/speed/');
var speedSassResourceFolder = path.join(resourceRoot, 'assets/sass/speed/');
var themeResourceFolder = path.join(resourceRoot, 'wp-content/themes/pbc2017');
var bowerDirectory = path.join(rootDir, 'bower_components');
var npmDirectory = path.join(rootDir, 'node_modules');
var composerDirectory = path.join(rootDir, 'vendor');
var Task = elixir.Task;
// Copy library files. Add libraries to this list as needed. Format is key => [source, destination]
var copyFiles = {
// copy Bootstrap-sass from NPM directory to theme sass vendor folder
'bootstrap-sass': [npmDirectory + '/bootstrap-sass/**/*.*', themeResourceFolder + '/sass/vendor/bootstrap-sass'],
// copy Bourbon from NPM directory to theme sass vendor folder
'bourbon': [npmDirectory + '/bourbon/**/*.*', themeResourceFolder + '/sass/vendor/bourbon'],
// copy Bourbon from bower directory to theme sass vendor folder
'gutenberg': [bowerDirectory + '/Gutenberg/**/*.*', themeResourceFolder + '/sass/vendor/Gutenberg'],
// copy over the font-awesome css and fonts to the theme vendor folder
'font-awesome-css': [bowerDirectory + '/font-awesome/css/**/*.*', themeFolder + '/vendor/font-awesome/css'],
'font-awesome-fonts': [bowerDirectory + '/font-awesome/fonts/**/*.*', themeFolder + '/vendor/font-awesome/fonts'],
// copy over the weather css and fonts to the theme vendor folder
'weather-css': [bowerDirectory + '/weather-icons/css/**/*.*', themeFolder + '/vendor/weather-icons/css'],
'weather-fonts': [bowerDirectory + '/weather-icons/font/**/*.*', themeFolder + '/vendor/weather-icons/font'],
// copy over the Twitter Bootstrap distribution to theme vendor folder
'bootstrap': [bowerDirectory + '/bootstrap/dist/**/*.*', themeFolder + '/vendor/bootstrap'],
// copy over the Require.js distribution to theme vendor folder
'requirejs': [bowerDirectory + '/requirejs/**/*.*', themeFolder + '/vendor/requirejs'],
// copy over the jQuery distribution to theme vendor folder
'jquery': [npmDirectory + '/jquery/dist/**/*.*', themeFolder + '/vendor/jquery'],
// copy over the BBC imager.js distribution to theme vendor folder
'imager.js': [bowerDirectory + '/imager.js/dist/**/*.*', themeFolder + '/vendor/imager.js'],
// copy over the underscore distribution to theme vendor folder
'underscore': [bowerDirectory + '/underscore/**/*.*', themeFolder + '/vendor/underscore'],
// copy over the axios distribution to theme vendor folder
'axios': [npmDirectory + '/axios/dist/**/*.*', themeFolder + '/vendor/axios'],
// copy over the vue.js distribution to theme vendor folder
'vue.js': [bowerDirectory + '/vue/dist/**/*.*', themeFolder + '/vendor/vue'],
// copy over the color-picker distribution to theme vendor folder
'color-picker': [npmDirectory + '/bootstrap-colorpicker/dist/**/*.*', pluginMapFolder + '/'],
// copy over the backend to theme vendor folder
'map-backend-js': [resourceRoot + '/assets/js/map/**/*.js', pluginMapFolder + '/js'],
// copy over the jQuery autocomplete distribution to theme vendor folder
// copy over the jQuery autocomplete distribution to theme vendor folder
'jquery-ui-css1': [bowerDirectory + '/jquery-ui/themes/ui-lightness/jquery-ui.min.css', pluginMapFolder + '/css'],
'jquery-ui-css2': [bowerDirectory + '/jquery-ui/themes/ui-lightness/theme.css', pluginMapFolder + '/css'],
'jquery-ui-images': [bowerDirectory + '/jquery-ui/themes/ui-lightness/images/*.png', pluginMapFolder + '/images'],
// copy over google maps distribution to theme vendor folder
'google-maps': [npmDirectory + '/google-maps/lib/*.js', pluginMapFolder + '/js'],
// copy over the sass-flex-mixin distribution to theme vendor folder
'sass-flex-mixin': [bowerDirectory + '/sass-flex-mixin/**/*.*', themeResourceFolder + '/sass/vendor/sass-flex-mixin'],
// copy over the responsive slides plugin
'ResponsiveSlides': [bowerDirectory + '/ResponsiveSlides/**/*.*', themeFolder + '/vendor/ResponsiveSlides'],
// copy over the loader to simplify the canvas drawing
'circle-progress': [bowerDirectory + '/jquery-circle-progress/dist/circle-progress.min.js', pluginSpeedFolder + '/js'],
};
/*
|--------------------------------------------------------------------------
| runShell task
|--------------------------------------------------------------------------
|
| Run a shell task from cli
*/
elixir.extend('runShell', function (source, cmd) {
new Task('runShell', function(){
return gulp.src(source, {read: false, quiet:true})
.pipe(shell([cmd]))
})
});
/*
|--------------------------------------------------------------------------
| blueMountain task
|--------------------------------------------------------------------------
|
| Coffee Extension, needed due to the fact that the new coffee
| task in elixir will always combine js files.
*/
elixir.extend('blueMountain', function (src, outputDir) {
new Task('blueMountain', function () {
return gulp.src(src + '**/*.coffee')
.pipe(coffee({bare: true}).on('error', gutil.log))
.pipe(gulp.dest(outputDir))
.pipe(logger({
before: 'Starting Coffee Script compile to Js',
after: 'Coffee Script compile complete'
}))
}).watch(path.join(src, '/**/*.coffee'));
});
/*
|--------------------------------------------------------------------------
| copyFiles task
|--------------------------------------------------------------------------
|
| Copy files from one destination to another
*/
elixir.extend('copyFiles', function(src, output){
new Task('copyFiles', function() {
return gulp.src(src)
.pipe(gulp.dest(output))
.pipe(logger({
before: 'Starting copy of files',
after: 'Copy of files complete'
}))
}).watch(src);
});
/*
|--------------------------------------------------------------------------
| minifyJs task
|--------------------------------------------------------------------------
|
| Shrink js
*/
elixir.extend('minifyJs', function(src, dist){
new Task('minifyJs', function() {
return gulp.src(src)
.pipe(uglify().on('error', gutil.log))
.pipe(gulp.dest(dist))
.pipe(logger({
before: 'Starting minify of Js',
after: 'Minify of Js complete'
}));
});
});
/*
|--------------------------------------------------------------------------
| cleanCss task
|--------------------------------------------------------------------------
|
| Shrink css
*/
elixir.extend('cleanCss', function(src, dest){
new Task('cleanCss', function() {
gulp.src(src)
.pipe(cleanCSS({}).on('error', gutil.log))
.pipe(gulp.dest(dest))
})
});
/*
|--------------------------------------------------------------------------
| Mix tasks for Map
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Sassy task
|--------------------------------------------------------------------------
|
| Compile sass file to css with eyeglass
| https://github.com/sass-eyeglass/eyeglass/blob/master/site-src/docs/integrations/gulp.md
|
*/
elixir.extend('sassy', function(source, destination, options){
new Task('sassy', function() {
return gulp.src(source)
.pipe(sourcemaps.init())
.pipe(sass(options).on("error", sass.logError))
.pipe(autoprefixer())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(destination))
.pipe(logger({
before: 'Starting SASS compile to CSS',
after: 'SASS compile to CSS complete'
}));
}).watch(path.join(path.dirname(source), '**/*'));
});
/*
|--------------------------------------------------------------------------
| Delete task
|--------------------------------------------------------------------------
|
| Task for deleting files and folders
| https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md
|
*/
elixir.extend('delete', function(toClean){
new Task('delete', function(){
return del(toClean);
});
});
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function (mix) {
// update bower dependencies
mix.runShell('./', "bower install; bower prune");
// copy files from source to destination
Object.keys(copyFiles).forEach(function (key) {
mix.copyFiles(copyFiles[key][0], copyFiles[key][1]);
});
/*
|--------------------------------------------------------------------------
| Mix tasks
|--------------------------------------------------------------------------
|
| Add mix tasks here,
|
*/
mix
/** ================================================
* Compile Theme SASS -> CSS
================================================= */
// main style sheet
.sassy(path.join(themeResourceFolder, 'sass/style.scss'), path.join(themeFolder, 'css'), {
outputStyle: (process.env.APP_ENV === 'production' || elixir.config.production === true ? 'compressed': 'nested'),
indentWidth: 4,
indentType: 'space',
includePaths: [
path.join(themeResourceFolder, 'sass/libraries')
]
})
// stylesheet with overrides for Business side
.sassy(path.join(themeResourceFolder, 'sass/residential.scss'), path.join(themeFolder, 'css'), {
outputStyle: (process.env.APP_ENV === 'production' || elixir.config.production === true ? 'compressed': 'nested'),
indentWidth: 4,
indentType: 'space',
includePaths: [
path.join(themeResourceFolder, 'sass/libraries')
]
})
// stylesheet with overrides for Business side
.sassy(path.join(themeResourceFolder, 'sass/business.scss'), path.join(themeFolder, 'css'), {
outputStyle: (process.env.APP_ENV === 'production' || elixir.config.production === true ? 'compressed': 'nested'),
indentWidth: 4,
indentType: 'space',
includePaths: [
path.join(themeResourceFolder, 'sass/libraries')
]
})
// stylesheet with overrides for Gigazone side
.sassy(path.join(themeResourceFolder, 'sass/gigazone.scss'), path.join(themeFolder, 'css'), {
outputStyle: (process.env.APP_ENV === 'production' || elixir.config.production === true ? 'compressed': 'nested'),
indentWidth: 4,
indentType: 'space',
includePaths: [
path.join(themeResourceFolder, 'sass/libraries')
]
})
// stylesheet with overrides for Cooperative side
.sassy(path.join(themeResourceFolder, 'sass/cooperative.scss'), path.join(themeFolder, 'css'), {
outputStyle: (process.env.APP_ENV === 'production' || elixir.config.production === true ? 'compressed': 'nested'),
indentWidth: 4,
indentType: 'space',
includePaths: [
path.join(themeResourceFolder, 'sass/libraries')
]
})
// get rid of the left over sass folder
.delete(path.join(themeFolder, 'css/sass'))
// compile theme coffee files to js
.blueMountain(themeResourceFolder + '/coffee/', themeFolder + '/js/')
// copy twig views from resources to theme folder
.copyFiles(themeResourceFolder + '/twig/**/*.twig', themeFolder + '/views')
// copy js files from resources to theme folder
.copyFiles(themeResourceFolder + '/js/**/*.js', themeFolder + '/js')
;
/** ================================================
* Compile Map SASS -> CSS
================================================= */
mix
.sassy(path.join(speedSassResourceFolder, 'frontend.scss'), path.join(pluginSpeedFolder, 'css'), {
outputStyle: 'nested',
indentWidth: 4,
indentType: 'space'
})
.sassy(path.join(mapSassResourceFolder, 'frontend.scss'), path.join(pluginMapFolder, 'css'), {
outputStyle: 'nested',
indentWidth: 4,
indentType: 'space'
})
.sassy(path.join(mapSassResourceFolder, 'backend.scss'), path.join(pluginMapFolder, 'css'), {
outputStyle: 'nested',
indentWidth: 4,
indentType: 'space'
})
.copyFiles(speedJsResourceFolder + '*.js', pluginSpeedFolder + '/js')
.minifyJs(speedJsResourceFolder + '/js/*.min.js', pluginSpeedFolder + '/js/')
.copyFiles(mapJsResourceFolder + '*.js', pluginMapFolder + '/js')
.minifyJs(pluginMapFolder + '/js/*.min.js', pluginMapFolder + '/js/')
;
/*
|--------------------------------------------------------------------------
| Production tasks
|--------------------------------------------------------------------------
|
| If app it set to production then minimize things
|
*/
if(process.env.APP_ENV === 'production' || elixir.config.production === true) {
// get latest git commit hash and make it available to the theme
mix.runShell('./', "bash git_log.sh; echo $(head -n 1 git_log.txt) > " + themeFolder + '/latest_git_commit_hash.txt')
.cleanCss(themeFolder + '/css/**/*.css', path.join(themeFolder,'dist/css'))
.minifyJs(themeFolder + '/js/**/*.js', path.join(themeFolder,'dist/js'));
}
// live reload on edited files
mix.livereload([
themeFolder + '/**/*',
bowerDirectory,
npmDirectory,
composerDirectory
], {});
});
Thanks in advance!
via Nelson
