gulp.task("compile-vendor-js", function() {
return gulp.src("./bower_components/*/*.js")
.pipe(concat("vendor.js"))
.pipe(gulp.dest("./build"))
});
This gulp task will compile bower solved dependencies.
The problem is, it will consider all JS files, including the minified ones, making my build file have duplicated code.
I know that one solution for this is having a variable array containing all file paths, but this isn't good.
try something like:
gulp.src(["./bower_components/*/*.js", "!./bower_components/*/*.min.js"])
where you can find a common denominator between all the minified js files (eg, .min.js)
I think that a blacklist of files is going to be shorter than a whitelist in this case.
Also, you might consider looking into the main-bower-files project, which will read your bower.json file and pull out the main js files from each project for you.
Related
I currently have this:
mix.js("./enterpath/**/*.js", "../../path/to/build/build.js");
We recently started to introduce tests in those folders for each js file test.spec.js
But now those files are also being compiled with the normal JS.
How do I tell mix to mix all *.js files except *.spec.js?
Well, this is not the best solution as it still compiles it, but at least I can choose not to include that file. This fixed my issue, but this shouldn't be the long-term solution:
mix.js("./enterpath/**/*.js", "../../path/to/build/build.js").extract(["spec"]);
I have a very old AngularJS project which is quite big. Instead of creating a bundled .js file composed of all the required code, this project is organized in the following way:
All the .js files are directly loaded in index.html with a <script src="path/to/js">
Even the dependencies minified .js files are loaded in the same way, examples:
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
The code makes vast use of definitions (functions, classes, enums and so on) declared in different .js files without importing them (because they are all available globally). Examples:
// inside one file, PastFuture is not declared here
if (self.pastFuture === PastFuture.FUTURE) {
... // do something
}
// inside another file, it is not exported or anything, it is just defined
const PastFuture = {
PAST: 'PAST',
FUTURE: 'FUTURE'
};
I want to migrate this project into something a bit more "standard". I've removed bower for npm dependencies but now I'm stuck at forcing all these .js files to get bundled together.
The major problem of the code is that once bundled with browserify, all the definitions not imported stops working, for example, PastFuture is not defined unless I import it manually wherever is required.
Is there a way to overcame / solve this problem without adding exports and require in all the files of the project?
I was thinking that if I concatenate all those .js files instead of trying to make them require each other, it would have the safe effect without the need to add exports and imports.. but as a solution, it just sounds like a hack to me and I was searching for something more correct.
We recently created a Repository for a TypeScript project. We try to .ignore all generated files to keep our repository and build processes clean.
Currently our TypeScript files someFile.ts are compiled to JavaScript files someFile.js. We would like to ignore all compiled files. However, there are javascript files which we would like to track in our repository. This makes it impossible to simply ignore all src/**/*.js files.
Is there a way to add a prefix or postfix or other naming adjustment to the compiled javascript files as a compileOption? Something like file.compiled.js?
From the docs: http://www.typescriptlang.org/docs/handbook/compiler-options.html
You could use --listEmittedFiles and save the list of compiled files to .gitignore
I'm trying to repeat this tutorial:
https://ampersandjs.com/learn/npm-browserify-and-modules/#npm-browserify-amp-modules
But after installing browserify I don't see folder: node_modules/.bin
Instead I see a folder node_modules/browserify. Inside there is a bin folder, and Iinside of it - cmd.js and args.js.
How should I change this line of code in my case: ./node_modules/.bin/browserify app.js -o app.bundle.js to compile all js files into one file?
Or maybe I need to install browserify some other way?
Put together, the flow of creating a very simple web application with these tools might look something like this:
You simply need to point your cmd prompt to the browserify node_module, so drop the .bin if it's not there => /node_modules/browserify yourjsfile.js myjsfile.bundle.js
As far as I can understand this guide: the app.js file or yourjsfile.js needs to have all the library requirements included in order for it to work.
var squareNumbers = require('./square-numbers');
This means you need to write this file as an entry point for all your scripts you need to bundle.
TIP: try to find a youtube video or something to get a better understanding of this guide.
The dot in front of these directories tells you it's a system folder, in this case, not of your operating system, but from another "system/application", like node. It puts these kind of folders alphabetically on top to make a distinction.
we have a problem at work, we are using require js but our folder structure is a bit different,
we have the following:
--js folder
--Folder
---some base js files
-Folder
---main
--src
---require.js
--- require JS modules
--plugin js files
--more js files
We would like to minify all these JS files to a SINGLe js file for production as such
---js folder
--min-all.js
Is this possible?
if so how? ..
Any help would be appreciated!
Thanks!
I just thought I would clarify that the other Folders contain standard non modular javascript files, they can be a mix of plugins or simple javascript helpers.
The short answer is: yes, RequireJS can do this.
Basically, you will need to create one JS file that requires all of the resources that you want minified. Then you will point the optimizer at that file and it will mash them all together.
require(["one", "../another/two", "folder/three", "folder/inner/four" ... ]);
If that file was called myfile.js, you would run the optimizer with similar parameters to this:
node r.js -o name=myfile out=optimized.js
If you have libraries or other files that you do not want included into the final optimized file, you would use the excludeShallow flag. e.g.
node r.js -o name=myfile out=optimized.js excludeShallow=jquery.min
There are more options so you should check out their optimization documentation if you haven't yet.