I have multiple minified files in multiple folder in a single folder for minified js.
I wish to create single js file from all of minified js.
Now I am using type command to concatenate all files like
type .\\v2\\dist\\js\\*.js >> .\\build\\a.min.js && type .\\v2\\dist\\js\\config\\*.js >> .\\build\\a.min.js && ...
Like wise I need to append all recursive folders.
Is there any clean way to do it.
Please don't suggest using Gulp or Grunt as we are already in process of removing them & using Webpack. Any code using webpack or using npm or simple command line is welcome.
If on Windows, you can use command line like below (refer to #dbenham's answer):
for /r "c:\javascripts" %F in (*.js) do #type "%F" >>concatenated.js
If on Linux or Mac, you can use find:
find ./v2/dist/js/ -name '*.js' -exec cat {} \; > ./build/a.min.js
Related
I have the following folder structure in my Meteor project.
> .meteor
>public
> client (dir)
>> foo.html &
>> foo.js
>> bar (dir: client/bar)
>>> bar.html &
>>> bar.js
> server
>> baz.js
I want to format all JS files inside of client directory
npx prettier --write 'client/**/*.js'
only formats files like bar.js. In reality I have up to 5 levels deep folders, and they need to be formatted too.
npx prettier --write 'client/**'
Works, but affects html (handlebar) files, I want to avoid that.
Any ideas? I can't find anything in the documentation, a part from manually adding an ignore to all .html files but that's an overkill.
Add a .prettierignore file to your project root to ignore handlebars files, e. g.:
*.handlebars
You can add the following config to avoid handlebars (.hbs) formatting
"[handlebars]": {
"editor.formatOnSave": false,
"editor.formatOnPaste": false
}
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.
I am trying to structure javascript files in a project. I have used NPM to manage the modules and planning to use Grunt to concatenate and compress the js and css files for deployment.
I am currently using the following structure
-[project root]
-- [node modules] :packages such as requirejs, jquery, semantic-ui etc using npm
--[war]
---[Dev]
----[css] multiple css files from modules (Question 2:?)
----[js] multiple js files from modeuls (Question 2:?)
- Gruntfile.js :for concatenate and compress
---[Production] -
----[css]:This is where the compressed and concatenated css files are kept
----[js] :This is where the compressed and concatenated js files are kept
Question 1: Is the above approach to structure the project correct ? Any other recommendations which allows to manage the packages, dev and production files.
Question 2: Can NPM or another tool allows me to pick up the js and css files from the [node modules] folder and place them to (dev>>css or dev>>js) folder ? If am doing this manually how do I track the versions ? Seems like I am missing something here, there must be a better solution.
Suggestions/recommendations/comments are much appreciated.
Thanks
The question is a bit too wide for SO format, but in general your structure is good. Instead of copying files from node_modules, you have your own JavaScript files under js and you import/require them to your own files.
//foo.js
//ES6 style imports
import {Foo as Bar} from "biz";
//Common JS style requires
var Bar = require("biz");
//AMD style requires
require(["biz"], function (Bar) {
If you want to use your node_modules in a browser, you'll want to bundle them using Browserify, Webpack, Rollup or similar. To automate this, you can easily use Grunt tasks such as grunt-browserify together with grunt-watch.
Same applies for your CSS files: You store your own files under css and if you need CSS files from node_modules you can import them to your own files: if you are using some preprocessor (such as SASS or LESS), the preprocessors usually inline your imports when building the .css-file. If you are just using plain .css files, see grunt-css-import for example.
When I try to do build with steal/buildjs of Javascript MVC, envJS silently fail to compress and check JavaScript files for errors.
I read documentation for envJS and found there that if in some case you try to build empty .js files envJS will fail.
Obviously it is in my case, and later I founded some of empty .js files.
I need a way to add checking for empty .js and .ejs files before build.
What would be the most efficient way to do check for empty .js and .ejs when running steal/buildjs?
I would use find:
find . -type f \( -name *.js -o -name *.ejs \) -size 0 -print
Change -print to -delete when you're sure.
This is probably a quick question. I'd like to run the YUI compressor so that, instead of overwriting all of the javascript files in the input directory, it dumps the output files into a subdirectory called min. I would like to do something like
java -jar yuicompressor-2.4.7.jar -o *.js .\min\*.js c:\MyJavascriptDirectory\*.*
but instead it just overwrites the existing files with the minified files. Does anyone know the correct syntax to accomplish this?
Thanks!
I'm not sure of the correct syntax to do that, but someone has made a modification so that you can set up your output directory as follows
java -jar yuicompressor.jar --output-dir /some/folder/for/compressed/js *js
This allows you to have a source folder and a compressed folder. As opposed to having source and a bunch of -min.js files in the same folder.
You can download the mod at the bottom of the page here http://yuilibrary.com/projects/yuicompressor/ticket/2528131
java -jar yuicompressor.jar -o '.js$:-min.js' *.js will minify all .js files and save them as -min.js then you could just move all those files: mkdir min; mv *-min.js min/.
Source