Lets say I have gulp watch running and I add a file to a task. Is there any way to have the gulp watch process automatically restart since a task has changes?
gulp.watch isn't working for new or deleted files.
In order to accomplish that, you can use gulp-watch plugin: https://www.npmjs.org/package/gulp-watch
var gulp = require('gulp'),
watch = require('gulp-watch');
gulp.task('live', function () {
watch({glob: 'global/files/**/*.extension'}, function(files) {
// Do stuffs
});
});
This solution comes from this question:
Gulps gulp.watch not triggered for new or deleted files?
Related
Basically, I want sourcemaps available to my unminified and minifies flavors of my site.css file. I'd like my end result to be:
site.css
site.min.css
site.css.map
site.css.min.map
Currently, I only get:
site.css
site.min.css
site.css.min.map
I know my gulp script is wrong, but I don't know how to fix it. I need sourcemaps to write a sourcemap to site.css before site.min.css gets created. HALP!
and Thank you
gulp.task('scss', gulp.series('bootstrap:scss', function compileScss() {
return gulp.src(['./site/assets/scss/*.scss'])
.pipe(sourcemaps.init())
.pipe(sass.sync({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(gulp.dest('./site/dist/css')) // outputs site.css
.pipe(postcss([autoprefixer(), cssnano()
]))
.pipe(sourcemaps.write('.'))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./site/dist/css')) //outputs site.min.css
}));
You only need sourcemaps for your unminified version, i would introduce a NODE_ENV for doing minification and sourcemaps, then use gulp-if to see if you're in development or production environment
Alternatively you could have separate build and dev tasks.
Using process.env.NODE_ENV means you can use them in postcss.config.js files etc. too
I found this really good because it shows you how you can use a gulp.babel.js file with Gulp 4. I was using 3.9.1 being reluctant to upgrade until this week but this helped immensely with understanding the changes from v3>4.
I am using gulp and mocha to run unit tests which is part of a gulp workflow to run my reactjs app. The unit test works:
gulp.task('mocha', function () {
return gulp
.src(['test/*.js'])
.pipe(mocha({
compilers: {
js: babel
}
})
})
However if the unit test is broken I would like to exit the whole gulp workflow. How can I do this?
You could try to just kill the process and restarting it when you want? Prehaps i do not fully understand your question, if so please ellaborate.
In cmd where you run the gulpscript you can press CTRL + C, and than Y to affirm. This stops the current script.
Mocha runs the tests. Gulp simply groups files, folder locations and pipe invokes mocha with this grouped information. What you are asking for is for a mechanism for mocha to communicate back to gulp the test results instead of its stdout if I read your question correctly. gulp automatically exits when mocha exits but if it does not then either you have a watch task or there is a allback in your gulp file that has not been resolved or this issue - [https://github.com/sindresorhus/gulp-mocha/issues/1][1]
You can use
.on('error', process.exit.bind(process, 1))
to check if the process exits
Or, if it is a callback issue, resolve the call with a done()
gulp.task('taskname', function (done) {
gulp.src('test/testfile.js')
.pipe(gulpmocha(),setTimeout(function() {
done(null);
}, 5000))
.on('error', process.exit.bind(process, 1))
});
If I execute this code it will throw an error saying it only accepts a function instead of the three tasks
gulp.task('build', ['clean'], ['styles', 'scripts', 'images']);
I want to execute the clean task before the other three,
I don't want to wire the clean task to each single task when I define them as clean will delete my whole build folder.
How do I do it?
This is the API reference https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulptaskname-deps-fn
Found the solution, use the run-sequence plugin to run tasks in order https://github.com/OverZealous/run-sequence
gulp.task('build', function() {
runSequence('clean',
['styles', 'scripts', 'images']);
});
This until Gulp 4.0 which will support gulp.series and gulp.parallel natively and it will look something like this
gulp.task('build', gulp.series('clean', gulp.parallel('styles', 'scripts', 'images')));
With
gulp.task('build', ['clean', 'styles', 'scripts', 'images']);
The clean task would be the first task that build is dependent upon to be launched however they will all be launched in parallel. That clean is launched first is due to the implemention and may change without notice.
This should work:
gulp.task('build', ['clean'], function(cb)
{
var runSequence = require('run-sequence');
runSequence( ['styles', 'scripts', 'images']);
} );
I'am new to Extjs5 and trying to run jasmine unit test cases with karma-runner. Although am sucessfully able to do that fro Ext4.2 application but same process is not working for Extjs5.
I have goggled it but didn't got any useful link
If anyone have already executed for Ext5 app please share the code.
Any help is highly appreciated.
Thanks
Tapaswini
The trick is to allow the required ExtJS classes to properly load before you start your test.
Make sure you include the following in your karma.conf.js
// We need to add an element with the ID 'appLoadingIndicator' because [app.js].launch() is expecting it and tries to remove it
// Karma normally starts the tests right after all files specified in 'karma.config.js' have been loaded
// We only want the tests to start after Sencha Touch/ExtJS has bootstrapped the application
// 1. We temporary override the '__karma__.loaded' function
// 2. When Ext is ready we call the '__karma__.loaded' function manually
var karmaLoadedFunction = window.__karma__.loaded;
window.__karma__.loaded = function () {
};
bootstrapExtJS(); // Create this function to add anything that is not included in your class definition requires and you need to require explicitly
Ext.onReady(function () {
window.__karma__.loaded = karmaLoadedFunction;
window.__karma__.loaded();
});
Let me know if it works for you.
I want to do a simple spec that involve DOM manipulate that phantomJS is working:
/*global describe it */
'use strict';
(function () {
describe('DOM Tests', function () {
var strong = 'Viva!';
var text = document.getElementById('test').innerHTML;
console.log(text);
it("is in DOM", function(){
expect(strong).equal('Viva!');
});
});
})();
But after running grunt test
there was no assertion
Running "clean:server" (clean) task
Cleaning ".tmp"...OK
Running "haml:app" (haml) task
Running "coffee:dist" (coffee) task
File .tmp/scripts/app.js created.
Running "coffee:test" (coffee) task
Running "compass:dist" (compass) task
directory .tmp/styles/
create .tmp/styles/main.css
Running "compass:server" (compass) task
unchanged app/styles/main.scss
Running "connect:test" (connect) task
Starting connect web server on localhost:9000.
Running "mocha:all" (mocha) task
Testing index.htmlOK
>> 0 assertions passed (0s)
Done, without errors.
Here is the code repository, in case you need to check my code