This question already has answers here:
Concat scripts in order with Gulp
(17 answers)
Closed 5 years ago.
I build my project with gulp, into a file called all.js.
In my workspace I have one file which I call modules.js. In this file I declare all of my namespaces.
I would like gulp to concat this file first, at the top of all.js, and only then the rest of the js files. This way I don't have to worry about files order, and any namespace being not defined.
Here is what I have tried:
gulp.src("./src/main/modules.js")
.pipe(concat("all.js"))
.pipe(gulp.src(["./src/**/*.js", "!./src/main/modules.js"]))
.pipe(concat("all.js"))
.pipe(gulp.dest(dist));
But this way, modules.js is all that I see in all.js. the rest of the files are not being written at all.
How can I tell gulp to write modules.js into all.js first, and then add the rest of the js files after it?
Thank you!
There is a way to specify the concatenation order (using 'order') in gulp:
gulp
.src("**/*.coffee")
.pipe(coffee())
.pipe(gulp.src("**/*.js")) // gulp.src passes through input
.pipe(order([
"vendor/js1.js",
"vendor/**/*.js",
"app/coffee1.js",
"app/**/*.js"
]))
.pipe(concat("all.js"))
.pipe(gulp.dest("dist"));
as explained in npm documentation and this good article. Hope this helps !
You can't use src after your concat. Use src first and add you modules.js at first followed by the rest of the scripts to make sure it works.
So gulp.src([path-to-modules.js, path-to-rest])
After that concat all and your modules.js will be on top.
Related
I'm new to Laravel mix, struggling to understand how the entry point can be changed.
My question is ... Is it possible to change the entry point of Laravel.mix.js, so that we can get multiple files from multiple paths, and output them accordingly?
To clarify the point, here are what I'd like to achieve...
1.compile many files from resources/assets/js/lib and output the compiled lib.js into public/js.
2.compile many files from resources/assets/js/others and output the compiled others.js into public/js.
By default, we see the following line in webpack.mix.js.
mix.js('resources/assets/js/app.js', 'public/js');
However, when I change it into the following line, this results in an error.
mix.js('resources/assets/js/lib/*.js', 'public/js/lib.js');
Error message -
This dependency was not found:
/ROOT/resources/assets/js/lib/* .js in multi ./resources/assets/js/lib/*.js
To install it, you can run: npm install --save /ROOT/resources/assets/js/lib/ *.js
It seems like it's not allowed to change the entry point (i.e. resources/assets/js/app.js).
Interestingly, the following line combines all the js files properly.
mix.scripts('resources/assets/js/lib/*.js', 'public/js/lib.js');
However, this simply combines and update files, not detect syntax errors.
Any advice will be appreciated.
You can use it like this below...
mix.combine(['resources/assets/js/lib/*'], 'public/js/lib.js');
Hope it helped
I am trying to generate a single typescript definition file for my typescript project which contains several base/inherit classes, utilities, etc. In our project, each A.ts file will be compiled to A.js file, A.js.map file, and A.d.ts. After research, I found both tools can help me to bundle those d.ts file into a single d.ts file. Does anyone use them before? Which one is better?
dts-generator worked better for me out of the two. However, I would suggest to also have a look at npm-dts. npm-dts adds index.d.ts file to TS-based npm package so it could be consumed out of the box by other TS modules and have code suggestions even if src is not included with it.
If you use "npm-dts", you do not need to generate declarations for each A.ts - it will crawl your project and generate typings on its own.
Command line usage looks something like this:
npm-dts -r /your/project/root generate
Note that it expects root to contain package.json file. Also, your project has to have node modules installed with "TypeScript" among them.
Hope this helps.
I want to do something like:
var dynamicRequire = require.context('./', true);
console.log(dynamicRequire.keys());
dynamicRequire('react/foo/bar');
But the console.log only shows files from the local directory, not the npm packages. When webpack builds i can see it get included as number 234 but the mapping from that path to that number is lost. How can I accomplish this? Thanks!
I'm not sure, what your problem exactly is here, but I suspect, that for your purpose you have just forgotten to provide require.context with second argument, which is a flag, that decides, whether the webpack should look into your subfolders and pick your files there also. So you could use require.context('./', true, [some regexp maybe ?]).
Let me know if that's not addressing your problem.
I am trying to get my gulp file working right and I am not sure whats wrong. Here is the file. https://gist.github.com/digilord/9265640 The section I am having issues with is the js:dev. When a coffeescript file is changed it drops the resulting js file into the app/js directory. The js:dev rule isn't picking up that change. Can anyone tell me what I am missing?
Immediate solution: gulp-watch needs the glob information to find new files. You can pass your glob to its glob option. Something like:
return gulp.src('app/js/*.coffee')
.pipe(watch({glob: 'app/js/*.coffee'}))
Meanwhile if you were to use gulp.watch() it wouldn't pick up new files either but only because of a bug in its dependency, which a fix is coming soon for.
I have to also mention that your gulpfile is needlessly complex. Your coffee and js operations could be in the same stream instead of creating intermediate js files. I also don't really know why some of your streams are repeated twice. Stay dry:
var coffeeGlob = 'app/js/*.coffee';
gulp.task('js:dev', ['clean:dev'], function() {
return gulp.src(coffeeGlob)
.pipe(watch({glob: coffeeGlob}))
.pipe(coffee({bare: true}).on('error', gutil.log))
.pipe(concat('app.js'))
.pipe(gulp.dest('build/js'))
.pipe(reload());
});
As I mentioned on IRC the boilerplate you based it on might not be up to date with best practices, and I recommend basing on something newer like Yeoman's gulp generator's gulpfile.
This question already has answers here:
What does "./" (dot slash) refer to in terms of an HTML file path location?
(12 answers)
Closed 8 years ago.
I have been reading through RequireJS
i dont get the difference between
define(["./cart", "./inventory"], function(cart, inventory) {...}
and
define(["cart", "inventory"], function(cart, inventory) {...}
what difference does the "./" makes?? and what alternative do we have to do , to use dependency paths without "./" ?
Generally speaking, the presence of ., .. and / in module names in RequireJS has the same meaning as for HTTP paths.
The presence of ./ in a dependency tells RequireJS to start its search from the current directory. It is extremely useful if what you want is use a module which you know is located in the same directory as the one that needs it. Let's say moduleA needs moduleB and both are in the same directory then moduleA can just require "./moduleB". One advantage of doing this is that you then don't have to worry about where the modules are stored. If you move them around but they are always together in the same directory then moduleA will always find moduleB.
Another thing is that if you require("moduleX") and there are multiple modules named moduleX available, which module are you going to get? Relative paths clarify which one you are going to get.
You ask how you can get rid of the ./ First, I'd ask do you really want to get rid of it? In the scenario I gave where two modules are in the same directory and this relation is meant to be stable, then it does not make sense to get rid of ./. It actually helps people reading the code. If what you are requiring is something like jQuery, which happens to be located in the same directory as another module at some moment but could legitimately be installed somewhere else, and which you would conceivably want to be unique for a given application, then it makes sense to have it be at a global well-known location. To do this, you use paths in your requirejs configuration, like:
paths: {
'jquery': 'external/jquery-1.9.1'
}
This is an actual piece of code part of an actual application. No matter which module wants jquery, it just issues require("jquery"). It does not have to worry about were jquery is located relative to itself. You can specify a path like this for any module you like, not just jQuery. If jQuery moves to a different location in the future or you want to serve it from a CDN, then this mapping in the snippet above is edited, but require("jquery") still works.
In context of your code, it means define cart in same directory as the current executing script.
The alternative is to use absolute paths:
/var/www/site/cart
as:
define(["/var/www/site/cart", "/var/www/site/inventory"], function(cart, inventory) {...}
Wikipedia
define(["./cart", "./inventory"], function(cart, inventory) {...}
it search specific file in current directory in filesystem
define(["cart", "inventory"], function(cart, inventory) {...}
it search specific file in root directory in filesystem
./ is refers to the current directory, to get the module currently in the same directory as the script. No ./ refers to the node path, where native and installed modules go (e.g.: net, fs, and anything use install via npm) Using an absolute path can get anywhere in the filesystem (/i/like/node/js/modules.js)
'/' refers to the root directory and
'./' refers to the current directory
define(["./cart", "./inventory"] : This will refer cart in the current directory where script is being executed.
./ means that you'll stay in the same directory.