Anyone know how to have a sound ( like grunt ) when gulp throw a error during compile/watch ?
l need to setup something special for gulp for have this feature ?
UPDATE: It should be noted that gulp-util has been deprecated and should not be used.
There is the ubituious gulp-util plugin. One of the features that it provides is the "gutil.beep();" function.
in your project's root execute:
npm install gulp-util --save-dev
then in your Gulpfile.js:
var gutil = require('gulp-util');
gutil.beep();
You can work with gulp-plumber which is excellent for handling errors in gulp streams. Setup the errorHandler method which will call the beeper() method provided by the NPM library - beeper
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var beeper = require('beeper'); //https://www.npmjs.com/package/beeper
gulp.task('compile-sass', function () {
return gulp.src('blob/for/files.scss')
.pipe(plumber(errorHandler))
.pipe(sass())
.pipe(gulp.dest('dest/'));
});
function errorHandler(error) {
// 3 beeps for error
beeper(3); // https://www.npmjs.com/package/beeper
return true;
}
Now, whenever there is an error in compiling sass, you will get 3 beeps to notify you that there was an error.
Good Luck.
npm install -g gulp-crash-sound
Source: https://www.npmjs.com/package/gulp-crash-sound
Related
I have bought template MaterialPro from wrappixel website. After I got the template package already, I have followed getting started installation from document attached with template as the following:
Install Node.js From https://nodejs.org/en/download/
Open terminal navigating to material-pro/
Install npm: npm install --global npm#latest
Install yarn: npm install --global yarn
Install gulp: npm install --global gulp-cli
Copy gulp: gulp copy
The gulpfile.js inside root template is like this:
//gulpfile.js
console.time("Loading plugins"); //start measuring
const gulp = require('gulp'),
minifyCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
rename = require("gulp-rename"),
sass = require('gulp-sass'),
npmDist = require('gulp-npm-dist');
console.timeEnd('Loading plugins');
const sassFiles = 'src/assets/scss/*.scss',
cssDest = 'dist/css/';
//compile scss into css
function style() {
return gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
}
//This is for the minify css
async function minifycss() {
return gulp.src(['dist/css/*.css', '!dist/css/**/*.min.css'])
.pipe(rename({
suffix: '.min'
}))
.pipe(minifyCSS())
.pipe(gulp.dest(cssDest));
}
// This is for the minifyjs
async function minifyjs() {
return gulp.src(['dist/js/custom.js','dist/js/app.js', '!dist/js/custom.min.js', '!dist/js/app.min.js'] )
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
}
// Copy dependencies to ./public/libs/
async function copy() {
gulp.src(npmDist(), {
base: './node_modules'
})
.pipe(gulp.dest('./src/assets/libs'));
};
async function watch() {
gulp.watch(['src/assets/scss/**/*.scss'], style);
gulp.watch(['dist/css/style.css'], minifycss);
gulp.watch(['dist/js/**/*.js', '!dist/js/**/*.min.js'], minifyjs);
}
gulp.task('default', watch);
exports.style = style;
exports.minifycss = minifycss;
exports.minifyjs = minifyjs;
exports.copy = copy;
exports.watch = watch;
After all, I made some changes to the template scss file, and run gulp command. At this point, the gulp command run never finished unitl now with output on terminal like this
Loading plugins: 539.410ms
[17:01:03] Using gulpfile ~/Documents/documentation/materialpro-bootstrap-latest/material-pro/gulpfile.js
[17:01:03] Starting 'default'...
[17:01:03] Finished 'default' after 18 ms
What was going wrong with this? Please kindly help, thanks.
P.S: Pls apologized if my question is incomplete or something, if I will try to add some more detail if suggested.
Your gulp code is fine. Made some change on your scss or js file it will show some changes.
Exaplantion
Your default command is gulp.task('default', watch);
when you run gulp it starts to watch your scss, css, js code. If there is new change it will execute the command.
Suggestion. Use like this.
async function watch() {
gulp.watch(['src/assets/scss/**/*.scss'], style, minifycss);
gulp.watch(['dist/js/**/*.js', '!dist/js/**/*.min.js'], minifyjs);
}
When running the following code I receive the following error:
[23:00:29] Task never defined: default
[23:00:29] To list available tasks, try running: gulp --tasks
gulp -v
CLI version: 2.2.0
Local version: 4.0.1
Can you let me know what I'm doing wrong here?
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
//compile scss into css
function style() {
//1. where is my sass file going to be
return gulp.src('./scss/**/*.sass')
//2. pass that file through sass compiler
.pipe(sass())
//3.Where do I save the compiled css
.pipe(gulp.dest('./css'))
}
exports.style = style;
Like the error says, you aren't defining a default task.
Either
run gulp style, or
export style as default (exports.default = style)
I'm having an issue with sourcemaps in gulp: when I try to implement gulp-sourcemaps directly through a pipe, but also when I try to feed it in via webpack, which if I've understood correctly, has sourcemaps by default, I keep getting the same confusing error:
Error: Cannot find module 'source-map'
I can see the #gulp-sourcemaps folder in my node_modules, which contains within it an identity-map folder containing a bunch more node_modules including the source-map module in question, so I think everything is hooked up as it should be. That being said, I'm new to gulp, so I might be missing something really obvious.
Can anyone offer me some guidance on how to help gulp find the module?
// package vars
const pkg = require("./package.json");
// gulp
const gulp = require("gulp");
const gulpIf = require("gulp-if");
// webpack
const webpack_config = require("./webpack.config");
// load all plugins in "devDependencies" into the variable $
const $ = require("gulp-load-plugins")({
pattern: ["*"],
scope: ["devDependencies"]
});
// ...
gulp.task("sass", function() {
return gulp
.src(pkg.paths.app.scss + "**/*.scss")
.pipe($.sourcemaps.init())
.pipe($.sass())
.pipe($.autoprefixer())
.pipe($.sourcemaps.write("./maps"))
.pipe(gulp.dest(pkg.paths.app.css))
.pipe(
$.browserSync.reload({
stream: true
})
);
});
// ...
gulp.task("webpack", function() {
return gulp
.src(pkg.paths.app.js + "**/*.js")
.pipe($.webpack(webpack_config))
.pipe(gulp.dest(pkg.paths.public.js));
});
// ...
I've created the file gulp.js, the code is below.
When I type gulp sass or node gulp sass or node gulp.js, nothing happens in node (it is supposed to print 10).
What am I doing wrong?
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
console.log(10);
})
Change task name to sass-task and then try gulp sass-task
I'm setting up a Backbone project and I use Gulp to run some tasks. I have encountered a stdout maxBuffer error when running my task with Browserify and gulp-compressor. So, in my app.js I have the following:
var Backbone = require('backbone');
var _ = require('underscore');
var $ = require('jquery/dist/jquery');
Then I've written a task to compile the required libraries into one file, which I will use in my index.html like <script src="dist/bundle.min.js"></script>, and to minify that file using gulp-compressor. Here is the task:
var gulp = require('gulp'),
browserify = require('gulp-browserify'),
compress = require('gulp-compressor'),
rename = require('gulp-rename');
gulp.task('browserify', function() {
gulp.src('app/javascripts/app.js')
.pipe(browserify({
insertGlobals: true,
debug: !gulp.env.production
}))
.pipe(compress())
.pipe(rename('bundle.min.js'))
.pipe(gulp.dest('dist'));
});
But every time I try to run the script it returns me
Error: Error: stdout maxBuffer exceeded
How could I solve that problem?
After some search in Google the Almighty I found an answer on gulp-compressor issue tracker. To solve this problem, one should give the following parameters to compress function:
// ...
.pipe(compress({
'executeOptions': {
maxBuffer: 10000*1024
}
}))
then run $ npm update and everything will work!