I'm pretty new to gulp, so I'm stumbling around a bit. I was fine up until the point I wanted to add sourcemaps to my project, now my gulp gets stuck after running the default task and doesn't seem like it will ever start my 'css' task. Since, I'm not getting an error (my gulp task is just stalling) I can't narrow down what's wrong with my file. Here's my gulpfile code and a picture of what's going on in my terminal. I've waited for a good 5 minutes for it to start 'css' and throw an error, but nothing is progressing.
As an edit note, I did change my sass files so that it would trigger the 'css' task to update my styles. I am still having the same issue where it is stuck after it runs the default task and does not start 'css'.
var gulp = require('gulp');
var minifycss = require('gulp-cssnano');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('css', function() {
return sass('sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(autoprefixer())
.pipe(concat('styles.css'))
.on('error', sass.logError)
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Wait for it....wait for it!!!' }));
});
gulp.task('default', function() {
gulp.watch('scss/**/*.scss',['css']);
});
terminal window
Related
I have a new empty .NET Core project. Can I automatically run Gulp tasks before a build in VS Code?
I can run the styles task manually by doing VS Code package manager -> Tasks: Run Task -> gulp -> gulp: styles, but when I do build it does not run.
/// <binding beforebuild="styles"></binding>
var gulp = require('gulp');
var gulpless = require('gulp-less');
gulp.task('styles', function () {
var srcfile = 'styles/Styles.less';
var dest = 'wwwroot';
return gulp
.src(srcfile)
.pipe(gulpless())
.pipe(gulp.dest(dest));
});
I got this code from some tutorials online and everything works except the first line.
Is this supposed to work in VS Code or is this only a luxury of Visual Studio?
//In this case we’re adding the a task before other task.
gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function (){
// ...
})
//And in this case we’re adding for example the browserSync task.
gulp.task('watch', ['browserSync'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
})
//We’ll also want to make sure sass runs before watch so the CSS will already be the latest whenever we run a Gulp command.
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
});
Read this document : Gulp for Beginners
I'm using the pre-build-webpack plugin to merge several json files into 1 json array every time I start my app (npm run serve or npm run build), but the problem is that it gets caught in an infinite webpack compile loop in when I start the development server. I managed to find a solution to the problem by using the watch-ignore-webpack-plugin plugin, which initially seemed to have resolved the issue - webpack will now compile everything twice (it seems) and then it's good to go and I can access my local server. But the problem now is that when I visit localhost:8080 there's nothing. The screen's blank and there's nothing being console.log()ed, so I don't know what to do anymore.
If anyone's seen anything like this or know how to fix it, please let me know. If you require any additional info, also let me know.
Versions:
vue: 2.6.10 (as seen in package.json)
vue-cli: 3.11.0 (running vue -V in cmd)
pre-build-webpack: 0.1.0
watch-ignore-webpack-plugin: 1.0.0
webpack-log: 3.0.1
vue.config.js (with everything irrelevant removed):
const WebpackPreBuildPlugin = require('pre-build-webpack');
const WatchIgnorePlugin = require('watch-ignore-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new WebpackPreBuildPlugin(() => {
const fs = require('fs');
const glob = require('glob');
const log = require('webpack-log')({ name: 'ATTENTION!' });
const output = [];
const exclude = [];
glob('./src/components/mods/**/*.json', (err, paths) => {
paths.forEach(path => {
const content = JSON.parse(fs.readFileSync(path, 'utf-8'));
const pathSplit = path.split('/');
const modFolderName = pathSplit[pathSplit.length - 2]
if(!output.filter(val => val.id === content.id)[0]) {
if(exclude.indexOf(modFolderName) === -1) {
output.push(content);
} else {
log.warn(`SKIPPING CONTENTS OF "${modFolderName}"`);
}
} else {
log.error(`MOD WITH ID "${content.id}" ALREADY EXISTS!`);
process.exit(0);
}
});
// If I take out this line, the infinite loop doesn't occur, but then, of
// course, I don't get my merged json file either.
fs.writeFileSync('./src/config/modules/layoutConfig.json', JSON.stringify(output));
});
}),
// Neither of the blow paths work.
new WatchIgnorePlugin([/\layoutConfig.json$/]),
// new WatchIgnorePlugin(['./src/config/modules/layoutConfig.json']),
]
}
};
I am working with magento2-frontools and try to solve this issue:
https://github.com/SnowdogApps/magento2-frontools/issues/231
The problem is, that gulp styles should have a non-zero exit code in case of errors, but it exits with 0.
The gulp file looks like this:
// Tasks loading
require('gulp-task-loader')({
dir : 'task',
plugins: plugins,
configs: config
});
And the styles.js task like this:
'use strict';
module.exports = function() { // eslint-disable-line func-names
// Global variables
const gulp = this.gulp,
plugins = this.opts.plugins,
config = this.opts.configs,
themes = plugins.getThemes(),
streams = plugins.mergeStream();
// Generate all necessary symlinks before styles compilation, but ony if not a part of tasks pipeline
if (!plugins.util.env.pipeline) {
plugins.runSequence('inheritance');
}
// Loop through themes to compile scss or less depending on your config.json
themes.forEach(name => {
streams.add(require('../helper/scss')(gulp, plugins, config, name));
});
return streams;
};
(it can all be found on GitHub)
If have seen this approach to solve the problem:
.once("error", function () {
this.once("finish", () => process.exit(1));
})
But where can I add that code?
Just the --ci flag has to be used.
Has someone integrated pdf2json npm package with Protractor? I have been able to create a standalone node application to convert a PDF to json.
What I'm trying to do now is to add pdf2json to protractor.config.js and be able to use it in my test specs.
I managed to make it work myself so I thought to post what I did just in case someone needs the same.
Add the following to the Protractor config file
// PDF Parser
var PDFParser = require("pdf2json");
global.pdfParser = new PDFParser();
In the spec, we just need to wait for the async call to load the PDF to finish - note the done() (see Jasmine Async Support). The spec would look like:
var fs = require('fs');
describe('PDF Parser', function() {
it ("The spec", function(done){
// Capture the error
pdfParser.on("pdfParser_dataError", errData => {
console.error(errData);
done();
});
// Transform to json
pdfParser.on("pdfParser_dataReady", pdfData => {
fs.writeFile("path/to/save/json/file", JSON.stringify(pdfData));
done();
});
// This is an async call. We have to wait for it, so we use done in the 'it'
pdfParser.loadPDF("path/to/pdf/file");
});
});
My Gulp setup is otherwise working fantastically, but it stops if there's an error with my JS files. Until Gulp 4 is finally released, we're all stuck using the less than perfect error system in Gulp... So how can I catch Uglify's errors?
gulp.task('js', function() {
return gulp
.src(inputJS)
.pipe(sourcemaps.init())
.pipe(concat('main.js'))
.pipe(uglify(uglifyOptions))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(outputJS))
});
According to the Uglify documentation, gulp-uglify emits an 'error' event if it is unable to minify a specific file. Wherever possible, the PluginError object will contain the following properties: fileName, lineNumber, message.
The closest I've gotten it to working is: .on('error', function(uglify) { console.error(uglify.message) })), but it ends up with the above Gulp task ceasing to do any more.
Edit: I realise that there's a number of Gulp extensions that help when dealing with error handling (eg. Gulp-Util, Stream-Combiner2, Gulp-Plumber, etc.) but I don't wish to install a whole new extension just for Uglify (I'm handling my Sass errors just fine without one).
It seems the solution was very simple:
.pipe(uglify(uglifyOptions).on('error', function(uglify) {
console.error(uglify.message);
this.emit('end');
}))
Almost exactly what Jeffwa suggested, but no need for gulp-plumber. The reason my attempt was stopping is because Gulp watch tasks wait until they receive end (see: https://github.com/gulpjs/gulp/issues/259).
Maybe gulp-plumber will help.
var plumber = require('gulp-plumber');
gulp.task('js', function() {
return gulp
.src(inputJS)
.pipe(plumber(function(error) {
console.error(error.message);
gulp.emit('finish');
}))
.pipe(sourcemaps.init())
.pipe(concat('main.js'))
.pipe(uglify(uglifyOptions))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(outputJS))
});
That should catch any errors emitted and write them to the console.