I've tried gulp-order, I've tried renaming files, and most recently I've tried just explicitly listing the scripts in the src like this:
gulp.task('scripts', function(){
return gulp.src([
'./js/bootstrap.min.js',
'./js/moment-with-locales.min.js',
'./js/jquery.fancybox.min.js'
])
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/'));
})
No matter what I do the output of bundle.js is not following the order that I need. For what it's worth the order does not change randomly when using concat it is the same order every time. But it's not alphabetical...
During my research it appears that the issue may be that my gulpfile.js changes are not being applied and I may need to "restart" gulp. That being said, I cannot find any information on how to "restart" gulp.
Turns out it wasn't gulp-concat that was changing the order. The order was being changed by gulp-uglify.
I was able to solve this problem by doing the uglify before the concat. Like so:
gulp.task('scripts', function(){
return gulp.src([
'./js/bootstrap.min.js',
'./js/moment-with-locales.min.js',
'./js/jquery.fancybox.min.js'
])
.pipe(uglify())
.pipe(concat('bundle.js'))
.pipe(gulp.dest('./dist/'));
})
Related
I'm trying to change a task from my gulpfile to create a rev manifest to be used in another moment. After this code work, I will add gulp-sourcemap to create some sourcemaps. But, this simple thing need to work first.
The objective is concatenate some scripts that are in scripts folder and inside a scripts subfolder (like 'c.js'), apply rev in this new script, vendor.js, and then fullfill the rev manifest to be used on another task.
I'm not a expert in Node.js or Gulp. It's de very first time I try to do this. So, it would be a stupid thing I forgot.
Here is my code (modified to look like an example) and thanks in advance
var vendorJs = ['scripts/a.js','scripts/b.js','scripts/anotherFolder/c.js'];
gulp.task("concat-vendor-js", function () {
return gulp.src(vendorJs)
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('dist/Scripts'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist'));
}
I'm getting this on my rev-manifest.json:
{
"/vendor.js": "/vendor-66687d0f7d.js"
}
But it should be like this:
{
"Scripts/vendor.js": "Scripts/vendor-66687d0f7d.js"
}
I am having issues with the performance of browser livereloading whenever I make a change to a js file. In my gulp setup, I have the following watches:
gulp.task('watch', function() {
gulp.watch(config.paths.html, ['html']);
gulp.watch(config.paths.js, ['js', 'lint']);
gulp.watch(config.paths.css, ['css']);
});
Thus, whenever there's a change to a js file, the js and lint tasks are triggered. They are as follows:
gulp.task('js', function() {
browserify(config.paths.mainJs)
.transform(reactify)
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dest + '/scripts'))
.pipe(connect.reload());
});
gulp.task('lint', function() {
return gulp.src(config.paths.js)
.pipe(lint({config: 'eslint.config.json'}))
.pipe(lint.format());
});
With this setup, livereloading on js file changes doesn't scale. As the project gets bigger, the live reloads take longer. Even a small project with about a dozen JS files already takes 3.8 seconds per reload.
I know the problem is that on every js file change, you're reactifying and bundling every js file in the project, which is an expensive operation and completely redundant for all the js files other than the one you changed. What's a better way to handle the live reloading? I know webpack uses hot module reloading, is there a gulp equivalent for this?
I'm developing a web application and I'm using about 20 bower_components (bootstrap, jquery, some jquery plugin like cookie and serializejson, mousewheel, mustache, underscore etc).
All these plugins are quite small (except for bootstrap and jquery), but are loaded with a dedicated "" tag.
This makes my page asks for 20 micro javascript files and this makes the page load slowly.
I'd like to bundle all these scripts together and load the bundle...
I've tried with gulp-bower-src but it just help me to uglify them and move them in a "lib" folder... Can't find a way to compress them all together.
This is my gulp task atm
var filter = gulpFilter("**/*.js", "!**/*.min.js");
gulp.task("default", function () {
bowerSrc()
.pipe(filter)
.pipe(uglify())
.pipe(filter.restore())
.pipe(gulp.dest(__dirname + "/public/lib"));
});
How can I do?
You can use gulp-concat to bundle all these micro files into one asset.
var concat = require('gulp-concat');
var filter = gulpFilter("**/*.js", "!**/*.min.js");
gulp.task("default", function () {
bowerSrc()
.pipe(filter)
.pipe(uglify())
.pipe(concat('bundle.js'))
.pipe(filter.restore())
.pipe(gulp.dest(__dirname + "/public/lib"));
});
This will concat all filtered and uglified files as bundle.js into directory public/lib. Keep in mind that when concatenating these files the order of files matters. I guess that gulp-bower-src does not order scripts according to a dependency graph (I found nothing in the documentation) so it might require you to select the bower files by hand in the right order.
A manual ordering/selecting of the bower components could be done by substituting the bowerSrc() by a line somehow like this
gulp.src(['./bower_components/jquery/jquery.js', './bower_components/jquery-ui/jquery-ui.js', './bower_components/jquery-swift-color-picker/color.js']);
This may seem a little clumsy and it is but order matters.
I'm trying to do the following:
gulp.src('js/*.js')
.pipe(concat('_temp.js'))
.pipe(gulp.dest('js/'));
gulp.src('build/js/app.js')
.pipe(replace('// includes', fs.readFileSync('js/_temp.js')))
.pipe(uglify())
.pipe(rename('app.min.js'))
.pipe(gulp.dest('build/js'));
So, I'm concatenating all .js files in js/. The concatenated file is named _temp.js;
After that, I'm reading a app.js and try to replace the // includes string with the concatenated _temp.js file. This doesn't work as node says the file doesn't exist. It does exist though, so I second time I run this task, it works.
This has most probably to do with asynchronisity, but I'm unable to see how I would do this differently?
You can split your task into 2 and make one of the tasks run after another by using Gulp's dependency resolution system.
gulp.task('task1', function () { ... });
gulp.task('task2', ['task1'], function () { ... });
I'm writing unit-tests with the Jasmine-framework.
I use Grunt and Karma for running the Jasmine testfiles.
I simply want to load the content of a file on my local file-system (e.g. example.xml).
I thought I can do this:
var fs = require('fs');
var fileContent = fs.readFileSync("test/resources/example.xml").toString();
console.log(fileContent);
This works well in my Gruntfile.js and even in my karma.conf.js file, but not in my
Jasmine-file. My Testfile looks like this:
describe('Some tests', function() {
it('load xml file', function() {
var fs = require("fs");
fileContent = fs.readFileSync("test/resources/example.xml").toString();
console.log(fileContent);
});
});
The first error I get is:
'ReferenceError: require is not defined'.
Does not know why I cannot use RequireJS here, because I can use it
in Gruntfiel.js and even in karma.conf.js?!?!?
Okay, but when manually add require.js to the files-property in karma.conf.js-file,
then I get the following message:
Module name "fs" has not been loaded yet for context: _. Use require([])
With the array-syntax of requirejs, nothing happens.
I guess that is not possible to access Node.js functionality in Jasmine when running the
testfiles with Karma. So when Karma runs on Node.js, why is it not possible to access the 'fs'-framework of Nodejs?
Any comment/advice is welcome.
Thanks.
Your test do not work because karma - is a testrunner for client-side JavaScript (javascript who run in browser), but you want to test node.js code with it (which run on the server part). So karma just can't run server-side tests. You need different testrunner, for example take a look to jasmine-node.
Since this comes up first in the Google search, I received a similar error but wasn't using any node.js-style code in my project. Turns out the error was one of my bower components had a full copy of jasmine in it including its node.js-style code, and I had
{ pattern: 'src/**/*.js', included: false },
in my karma.conf.js.
So unfortunately Karma doesn't provide the best debugging for this sort of thing, dumping you out without telling you which file caused the issue. I had to just tear that pattern down to individual directories to find the offender.
Anyway, just be wary of bower installs, they bring a lot of code down into your project directory that you might not really care to have.
I think you're missing the point of unit testing here, because it seems to me that you're copying application logic into your test suite. This voids the point of a unit test because what it is supposed to do is run your existing functions through a test suite, not to test that fs can load an XML file. In your scenario if your XML handling code was changed (and introduced a bug) in the source file it would still pass the unit test.
Think of unit testing as a way to run your function through lots of sample data to make sure it doesn't break. Set up your file reader to accept input and then simply in the Jasmine test:
describe('My XML reader', function() {
beforeEach(function() {
this.xmlreader = new XMLReader();
});
it('can load some xml', function() {
var xmldump = this.xmlreader.loadXML('inputFile.xml');
expect(xmldump).toBeTruthy();
});
});
Test the methods that are exposed on the object you are testing. Don't make more work for yourself. :-)