We Keep Coding

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object

There was a need to deploy an old project. Corrected gulpfile.js a bit so that the assembly started running, it came across an error:
[21:12:57] Finished 'html:build' after 71 ms
[21:12:57] Starting 'js:build'...
[21:12:57] 'js:build' errored after 15 ms
[21:12:57] TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string, Buffer,
ArrayBuffer, Array, or Array-like Object. Received type undefined
at Function.from (buffer.js:207:11)
at new Buffer (buffer.js:182:17)
at G:\firststep\odc-client-app-2019-clean-html\node_modules\gulp-rigger\index.js:20:29
at Rigger.<anonymous> (G:\firststep\odc-client-app-2019-clean-
html\node_modules\rigger\index.js:719:9)
at Rigger.emit (events.js:182:13)
at Rigger.EventEmitter.emit (domain.js:441:20)
at G:\firststep\odc-client-app-2019-clean-html\node_modules\rigger\index.js:252:16
at G:\firststep\odc-client-app-2019-clean-html\node_modules\async\lib\async.js:232:13
at G:\firststep\odc-client-app-2019-clean-html\node_modules\async\lib\async.js:113:21
at G:\firststep\odc-client-app-2019-clean-html\node_modules\async\lib\async.js:24:16
[21:12:57] 'build' errored after 87 ms
[21:12:57] 'default' errored after 89 ms
gulpfile.js:
'use strict';
var gulp = require('gulp'),
watch = require('gulp-watch'),
prefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
cssmin = require('gulp-cssmin'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
rigger = require('gulp-rigger'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
rimraf = require('rimraf'),
connect = require('gulp-connect'),
opn = require('opn'),
notify = require('gulp-notify'),
copy = require('gulp-copy'),
plumber = require('gulp-plumber'),
less = require('fd-gulp-less');
var path = {
build: {
html: 'build/',
js: 'build/assets/sys/js/',
css: 'build/assets/sys/css/',
img: 'build/assets/sys/img/',
fonts: 'build/assets/sys/fonts/'
},
src: {
html: 'src/*.html',
js: 'src/js/main.js',
style: 'src/style/style.less',
img: 'src/img/**/*.*',
fonts: 'src/fonts/**/*.*'
},
watch: {
html: 'src/**/*.html',
js: 'src/js/**/*.js',
style: 'src/style/**/*.less',
img: 'src/img/**/*.*',
fonts: 'src/fonts/**/*.*'
},
clean: './build'
};
var server = {
host: 'localhost',
port: '1495'
};
gulp.task('clean', function (cb) {
rimraf(path.clean, cb);
});
gulp.task('webserver', function() {
connect.server({
host: server.host,
port: server.port,
livereload: true
});
});
gulp.task('webserver-stop', function() {
connect.server({
host: server.host,
port: server.port,
livereload: true
});
connect.serverClose();
});
gulp.task('openbrowser', function() {
opn( 'http://' + server.host + ':' + server.port + '/build' );
});
gulp.task('html:build', function () {
return gulp.src(path.src.html)
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(rigger())
.pipe(gulp.dest(path.build.html))
.pipe(notify('HTML: Done!'))
.pipe(connect.reload());
});
gulp.task('js:build', function () {
gulp.src(path.src.js)
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(rigger())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.build.js))
.pipe(notify('JS: Done!'))
.pipe(connect.reload());
});
gulp.task('style:build', function () {
gulp.src(path.src.style)
.pipe(plumber({
errorHandler: function (err) {
console.log(err);
this.emit('end');
}
}))
// .pipe(sourcemaps.init())
.pipe(less())
.pipe(prefixer())
.pipe(cssmin())
// .pipe(sourcemaps.write())
.pipe(gulp.dest(path.build.css))
.pipe(notify('CSS: Done!'))
.pipe(connect.reload());
});
gulp.task('image:build', function () {
gulp.src(path.src.img)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}, {cleanupIDs: false}],
use: [pngquant()],
interlaced: true
}))
.pipe(gulp.dest(path.build.img))
.pipe(notify('IMG: Done!'))
.pipe(connect.reload());
});
gulp.task('fonts:build', function() {
gulp.src(path.src.fonts)
.pipe(gulp.dest(path.build.fonts))
.pipe(notify('FONTS: Done!'));
});
gulp.task('build', gulp.series(
'html:build',
'js:build',
'style:build',
'fonts:build',
'image:build'
));
gulp.task('watch', function(){
watch([path.watch.html], function(event, cb) {
gulp.start('html:build');
});
watch([path.watch.style], function(event, cb) {
gulp.start('style:build');
});
watch([path.watch.js], function(event, cb) {
gulp.start('js:build');
});
watch([path.watch.img], function(event, cb) {
gulp.start('image:build');
});
watch([path.watch.fonts], function(event, cb) {
gulp.start('fonts:build');
});
});
gulp.task('default', gulp.series('build', 'webserver-stop', 'webserver', 'watch', 'openbrowser'));
gulp.task('start', gulp.series('build', 'webserver-stop', 'webserver', 'watch'));
gulp.task('stop', gulp.series('webserver-stop'));
//gulp.task('default', ['build', 'watch', 'openbrowser']);
I tried npm install jquery --save-dev because I found such tips in Google, but it didn’t help, and also tried bower install jquery --save-dev, because there is a bower in the project, but it also didn’t help. How do I fix an assembly?
sorry for bad eng.

i just had the same error. The source of error was gulp-rigger package. try to remove it and see if that works.
p.s. i replaced gulp-rigger with gulp-include

this error indicates about some error your files. the gulp-rigger can't find some files in your project. Since gulp-rigger wrote 'js:build', check paths to jquery, popper, and other includes in main.js. have you created main.js before gulp start?

The name of the directory where my project was located contained parentheses. I removed them and everything worked.

gulp-usemin multiple html files

I made multiple html files in my repository für different views of my site:
index.html
news.html
page.html
But my gulp build task only build one of the files not all.
gulp.task('build:usemin', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/**/*.html')
.pipe(useMin({
css: [minifyCss(), 'concat'],
js: [minifyJs(), 'concat'],
html: [minifyHtml({collapseWhitespace: true})]
}))
.pipe(gulp.dest(distPath));
return stream;
});
Has anybody an idea how I can fix it?
Thanks.
My full gulpfile.js
////////////////////
// Modules
////////////////////
var gulp = require('gulp'),
sass = require('gulp-sass'),
sassLint = require('gulp-sass-lint'),
jsHint = require('gulp-jshint'),
minifyJs = require('gulp-uglify'),
minifyCss = require('gulp-minify-css'),
minifyHtml = require('gulp-htmlmin'),
minifyImages = require('gulp-imagemin'),
useMin = require('gulp-usemin'),
del = require('del'),
browserSync = require('browser-sync').create();
////////////////////
// Constants
////////////////////
const distPath = './dist';
////////////////////
// Tasks
////////////////////
// Sass
gulp.task('sass', function() {
gulp.src('./src/sass/**/*.scss')
.pipe(sassLint({
options: {
formatter: 'stylish',
configFile: './.sass-lint.yml'
},
}))
.pipe(sassLint.format())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./src/css'))
});
// Check JavaScripts
gulp.task('scripts-check', function() {
gulp.src('src/js/**/*.js')
.pipe(jsHint())
.pipe(jsHint.reporter('jshint-stylish'))
});
// Browsersync
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: './src/'
},
notify: false
});
});
// Watch
gulp.task('watch', function() {
gulp.watch('./src/js/**/*.js', ['scripts-check']);
gulp.watch('./src/sass/**/*.scss', ['sass']);
gulp.watch(['./src/*.html', './src/css/*.css', './src/js/*.js']).on('change', browserSync.reload);
});
// Serve
gulp.task('serve', ['sass', 'scripts-check', 'browser-sync', 'watch']);
////////////////////
// Build Tasks
////////////////////
gulp.task('build:cleanfolder', function() {
return del(distPath).then(paths => {
console.log('Deleted files and folders:\n', paths.join('\n'));
});
});
gulp.task('build:copyfiles', ['build:cleanfolder'], function() {
var stream = gulp.src([
'src/**',
])
.pipe(gulp.dest(distPath));
return stream;
});
gulp.task('build:cleanfiles', ['build:copyfiles'], function() {
return del([
distPath + '/**/*.html',
distPath + '/sass',
distPath + '/css',
distPath + '/js',
distPath + '/images',
distPath + '/bower_components'
])
.then(paths => {
console.log('Deleted files and folders:\n', paths.join('\n'));
});
});
gulp.task('build:usemin', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/**/*.html')
.pipe(useMin({
css: [minifyCss(), 'concat'],
js: [minifyJs(), 'concat'],
html: [ function(){ return minifyHtml({collapseWhitespace: true});} ]
}))
.pipe(gulp.dest(distPath));
return stream;
});
gulp.task('build:minify-images', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/images/**/*.{png,gif,jpg,svg}')
.pipe(minifyImages())
.pipe(gulp.dest(distPath + '/images'));
return stream;
});
gulp.task('build:sass', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest(distPath + '/css'))
return stream;
});
gulp.task('build:serve', function() {
browserSync.init({
server: {
baseDir: distPath
},
notify: false
});
});
gulp.task('build', ['build:sass', 'build:usemin', 'build:minify-images']);

As per the documentation
If you need to call the same pipeline twice, you need to define each task as a function that returns the stream object that should be used.
Therefore:
gulp.task('build:usemin', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/**/*.html')
.pipe(useMin({
css: [minifyCss(), 'concat'],
js: [minifyJs(), 'concat'],
html: [ function(){ return minifyHtml({collapseWhitespace: true});} ]
}))
.pipe(gulp.dest(distPath));
return stream;
});

Why is gulp complaining about Maximum call stack size exceeded?

I am writting a gulp tasks where I take several js file , concat them , minify those.. same with scss into css etc ...normal stuffs
And, it is for Drupal 8
Here is my gulpfile. However on running this, I keep on getting the following error:
[10:00:58] Starting 'scripts'...
events.js:160
throw er; // Unhandled 'error' event
^
RangeError: Maximum call stack size exceeded
at Object.TreeWalker._visit (eval at <anonymous> (/Applications/MAMP/htdocs/novaent/node_modules/uglify-js/tools/node.js:1:0), <anonymous>:1255:21)
'use strict';
And below is my gulp file
// Include gulp.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = require('./config.json');
// Include plugins.
var sass = require('gulp-sass');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');
var shell = require('gulp-shell');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var autoprefix = require('gulp-autoprefixer');
var glob = require('gulp-sass-glob');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
// sassOptions are optional but things like sourceComments (line_comments) can be pretty handy.
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: 'line_comments',
includePaths: config.css.includePaths
};
// CSS.
gulp.task('css', function() {
return gulp.src(config.css.src)
.pipe(glob())
.pipe(plumber({
errorHandler: function (error) {
notify.onError({
title: 'Gulp',
subtitle: 'Failure!',
message: 'Error: <%= error.message %>',
sound: 'Beep'
})(error);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefix('last 2 versions', '> 1%', 'ie 9', 'ie 10'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(config.css.dest))
.pipe(browserSync.reload({stream: true, injectChanges: true, match: '**/*.css'}));
});
// Compress images.
gulp.task('images', function () {
return gulp.src(config.images.src)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest(config.images.dest));
});
// Fonts.
gulp.task('fonts', function() {
return gulp.src(config.fonts.src)
.pipe(gulp.dest(config.fonts.dest));
});
// javaScripts
gulp.task('scripts', function() {
return gulp.src(config.js.src)
.pipe(concat('index.js'))
.pipe(gulp.dest(config.js.dest)) // outputs *.js without min
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(config.js.dest)) // outputs *.js.min
.pipe(notify({message: 'Rebuild all custom scripts'}));
});
// Watch task.
gulp.task('watch', function () {
gulp.watch(config.css.src, ['css']);
gulp.watch(config.fonts.src, ['fonts']);
gulp.watch(config.js.src, ['scripts']);
gulp.watch(config.images.src, ['images']);
});
// Static Server + Watch
gulp.task('serve', ['css', 'fonts', 'watch'], function () {
browserSync.init({
proxy: config.proxy
});
});
// Run drush to clear the theme registry.
gulp.task('drush', shell.task([
'drush cache-clear theme-registry'
]));
// Default Task
gulp.task('default', ['serve']);

I think I have solved it as below
'use strict';
// Include gulp.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = require('./config.json');
// Include plugins.
var sass = require('gulp-sass');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');
var shell = require('gulp-shell');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var autoprefix = require('gulp-autoprefixer');
var glob = require('gulp-sass-glob');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: 'line_comments',
includePaths: config.css.includePaths
};
var uglifyOptions = {
preserveComments: 'license',
warnings: 'true'
};
// CSS.
gulp.task('css', function() {
return gulp.src(config.css.src)
.pipe(glob())
.pipe(plumber({
errorHandler: function (error) {
notify.onError({
title: 'Gulp',
subtitle: 'Failure!',
message: 'Error: <%= error.message %>',
sound: 'Beep'
})(error);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefix('last 2 versions', '> 1%', 'ie 9', 'ie 10'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(config.css.dest))
.pipe(browserSync.reload({stream: true, injectChanges: true, match: '**/*.css'}));
});
// Compress images.
gulp.task('images', function () {
return gulp.src(config.images.src)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest(config.images.dest));
});
// Fonts.
gulp.task('fonts', function() {
return gulp.src(config.fonts.src)
.pipe(gulp.dest(config.fonts.dest));
});
// Concat all js files into one index.min.js file
gulp.task('scripts', function() {
return gulp.src(config.js.src)
.pipe(concat('./js/index.js'))
.pipe(gulp.dest('./js/'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify(uglifyOptions))
.pipe(gulp.dest('./assets/dist/'))
.pipe(notify({message: 'Rebuild all custom scripts. Please refresh your browser'}));
});
// Watch task.
gulp.task('watch', function () {
gulp.watch(config.css.src, ['css']);
gulp.watch(config.fonts.src, ['fonts']);
gulp.watch(config.js.src, ['scripts']);
gulp.watch(config.images.src, ['images']);
});
// Static Server + Watch
gulp.task('serve', ['css', 'fonts', 'scripts', 'watch'], function () {
browserSync.init({
proxy: config.proxy
});
});
// Run drush to clear the theme registry.
gulp.task('drush', shell.task([
'drush cache-clear theme-registry'
]));
// Default Task
gulp.task('default', ['serve']);

What is a good way to integrate express into gulp?

I've been given a project with existing gulp configuration. I'm completely new to gulp so I don't really understand the code at all. To complete the project I need to use express with ejs instead of the default html. However, I couldn't integrate express into the gulp config file, when I tried gulp-express, the server ended up not working as intended or not working at all (when I replace html with ejs).
I need to know which package should I use for this? What kind of folder structure is good enough? And how could I make express with ejs as the template engine work with gulp? Thank you in advance.
(Sorry if I ask too many questions)
The initial folder structure
The gulp config code
// generated on 2016-05-09 using generator-webapp 2.0.0
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync';
import del from 'del';
import {stream as wiredep} from 'wiredep';
const $ = gulpLoadPlugins();
const reload = browserSync.reload;
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
gulp.task('scripts', () => {
return gulp.src('app/scripts/**/*.js')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.babel())
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('.tmp/scripts'))
.pipe(reload({stream: true}));
});
function lint(files, options) {
return () => {
return gulp.src(files)
.pipe(reload({stream: true, once: true}))
.pipe($.eslint(options))
.pipe($.eslint.format())
.pipe($.if(!browserSync.active, $.eslint.failAfterError()));
};
}
const testLintOptions = {
env: {
mocha: true
}
};
gulp.task('lint', lint('app/scripts/**/*.js'));
gulp.task('lint:test', lint('test/spec/**/*.js', testLintOptions));
gulp.task('html', ['styles', 'scripts'], () => {
return gulp.src('app/*.html')
.pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.cssnano()))
.pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
.pipe(gulp.dest('dist'));
});
gulp.task('images', () => {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true,
// don't remove IDs from SVGs, they are often used
// as hooks for embedding and styling
svgoPlugins: [{cleanupIDs: false}]
})))
.pipe(gulp.dest('dist/images'));
});
gulp.task('fonts', () => {
return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {})
.concat('app/fonts/**/*'))
.pipe(gulp.dest('.tmp/fonts'))
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('extras', () => {
return gulp.src([
'app/*.*',
'!app/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'));
});
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
gulp.task('serve', ['styles', 'scripts', 'fonts'], () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
}
}
});
gulp.watch([
'app/*.html',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
gulp.task('serve:dist', () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['dist']
}
});
});
gulp.task('serve:test', ['scripts'], () => {
browserSync({
notify: false,
port: 9000,
ui: false,
server: {
baseDir: 'test',
routes: {
'/scripts': '.tmp/scripts',
'/bower_components': 'bower_components'
}
}
});
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('test/spec/**/*.js').on('change', reload);
gulp.watch('test/spec/**/*.js', ['lint:test']);
});
// inject bower components
gulp.task('wiredep', () => {
gulp.src('app/styles/*.scss')
.pipe(wiredep({
ignorePath: /^(\.\.\/)+/
}))
.pipe(gulp.dest('app/styles'));
gulp.src('app/*.html')
.pipe(wiredep({
exclude: ['bootstrap-sass'],
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app'));
});
gulp.task('build', ['lint', 'html', 'images', 'fonts', 'extras'], () => {
return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});
gulp.task('default', ['clean'], () => {
gulp.start('build');
});

Trying to build to correct directory using gulp

I used yeoman webapp to start my website. The goal is to make it
<script src=./scripts/vendor.js></script>
<script src=./scripts/main.js></script>
For my html files in another folder.
This my gulp file:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('styles', function () {
return gulp.src('app/styles/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
outputStyle: 'nested', // libsass doesn't support expanded yet
precision: 10,
includePaths: ['.'],
onError: console.error.bind(console, 'Sass error:')
}))
.pipe($.postcss([
require('autoprefixer-core')({browsers: ['last 1 version']})
]))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
gulp.task('jshint', function () {
return gulp.src('app/scripts/**/*.js')
.pipe(reload({stream: true, once: true}))
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});
gulp.task('html', ['styles'], function () {
var assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
return gulp.src('app/*.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.csso()))
.pipe(assets.restore())
.pipe($.useref())
.pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
.pipe(gulp.dest('dist'));
});
gulp.task('images', function () {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true,
// don't remove IDs from SVGs, they are often used
// as hooks for embedding and styling
svgoPlugins: [{cleanupIDs: false}]
})))
.pipe(gulp.dest('dist/images'));
});
gulp.task('fonts', function () {
return gulp.src(require('main-bower-files')({
filter: '**/*.{eot,svg,ttf,woff,woff2}'
}).concat('app/fonts/**/*'))
.pipe(gulp.dest('.tmp/fonts'))
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('extras', function () {
return gulp.src([
'app/*.*',
'!app/*.html',
'app/'+'**/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'));
});
gulp.task('clean', require('del').bind(null, ['.tmp', 'dist']));
gulp.task('serve', ['styles', 'fonts'], function () {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
}
}
});
// watch for changes
gulp.watch([
'app/*.html',
'app/'+'**/*.html',
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
// inject bower components
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/styles/*.scss')
.pipe(wiredep({
ignorePath: /^(\.\.\/)+/
}))
.pipe(gulp.dest('app/styles'));
gulp.src(['app/*.html', 'app/'+'**/*.html'])
.pipe(wiredep({
exclude: ['bootstrap-sass-official'],
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app'));
});
gulp.task('build', ['jshint', 'html', 'images', 'fonts', 'extras'], function () {
return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
I think the problem is somewhere when it tries to uglify. welp!