This is for bundling JS files through Browserify with out Grunt/Gulp . but through npm script(defined in package.json)
I am working on Anularjs mature application. which have everything in it.
right now its using grunt for bundling all js files and then refers that bundle file to index.html page.
i couldnt find any article which can let me know how can i user browserify for bundling all the js files (with minimum changes)of my project.
Folder structure of Project.
or can someone please share any good article on it.
Thanks in advance.
Related
Actually, I'm just curious as to why webpack is used in react applications. Why do I still use Webpack to create a dist folder with a dist.js file if I can create a build using npm run build?
Can somebody help me with my confusion?
I've create a test application with Ionic v5 w/React and I don't see any specifics in the documentation on how to configure Sass preprocessing. I have a couple sass files in the project structure, but they don't seem to be loading or being processed for that matter. I added node-sass to the package.json. Any help would be much appreciated. I used the Ionic Cli to created a blank app and added some .scss files to the project dir.
So I figured it out. Turns that ionic looks at the themes directory for all style sheets, including scss sheets. So I simply place my scss files there, ran ionic serve and imported the base style sheet, import '/theme/styles.scss' into the "main" component and it worked. I could run ionic build command see that the scss files were processed and minified into a .css file.
So just to make it clear that you do need to install node-sass via npm or yarn in order for Ionic to support scss files after that you can change any files whether it’s inside pages or components or theme folder and you just have to update the import to scss instead of css
Command for Installation
npm install --save-dev node-sass
Import changes
I created my angular application with "yeoman" using "yo angular" with grunt sass bootstrap.
But with node_mudules bower_component and all dev feature the empty project is 200mo sized
How can I build my application for production, include minify css/js and keep only used and required dependance.
EDIT
I don't understand the -1, thousand people use the angular-generator from yeoman and I can't find a build tutorial for this specific generator.
grunt build seems to work but the website is not displaying well.
grunt serve:dist build and run on serve but same problem as grunt build
The dev application ( it s just yo angular empty project )
After grunt serve, it works and i can navigate
After grunt serve:dist, it doesn't work and i can't navigate, it seems like "bower_components" are not build well
if you are using grunt do: "grunt build" or "grunt serve:dist", after the build you will get a dist folder, everything inside is you production app included minify css/js, you don't need anymore. And specify that for unknow reason "yo angular" add jquery to "devDependencies" but not in "dependencies"
in bower.json in you project.
You do not need to deploy everything from your project folder. Hope it help.
You do not need to deploy everything from your project folder. You can find info on this page.
Only files which you include/import in your index.html or css ( images or fonts ), are being used and tracked. Rest are all useless after deployment.
run gulp --production. firts it will clean dist folder (if exist) then move the minified and uglified file there.
I am new to grunt, I am not able to understand initial setup. What I have done all is installed node and grunt and this is no where related to my project. My question is
1. how to add grunt to my project. I am using angular project. Do I have to add grunt inside my project folder? if yes, Where should I add and how should I add?
2. Many of the document says to update gruntfile.js. When I search I
can see so many gruntfile.js inside grunt\node_modules folder. Which
gruntfile.js file I should modify?
Grunt doesn't actually go into your angular project. Only libraries that are meant to show up in your client's browser (i.e. to actually run the webapp) should be injected into Angular.
Think of grunt as a tool to help you manage the build system outside of your angular project.
You could run npm install grunt --save-dev and it would create a package.json file with information regarding your dependencies.
www.egghead.io has some great resources on learning Grunt and Angular, as does http://build-podcast.com/.
Consider also looking into npm, gulp, webpack and other alternatives.
Step1 - Install node and npm
Step2 - npm install -g grunt-cli
Step3 - Create Gruntfile.js in your project root folder. Click here for sample file
Step4 - register a task
Step5 - Run Grunt
hy
I've just installed yeoman and generator-angular.
everything works like expected, but changes in bower_components/bootstrap-sass-official/vendor/assets/stylesheets/* won't be caught in grunt watch or grunt serve tasks.
it's my first contact with bower and yeoman and I hope that this can be solved easily.
bootstrap.scss (imports all bootstrap scss files) is included in app/styles/main.scss witch will be converted to main.css in grunt watch task.
thank you for your help!
It is simple - just add this files to watch task in Gruntfile.js.
But it is entirely bad idea - you should not edit files under bower_components directory.
This files should be managed using bower, they are not even tracked by git and should not be(by default bower_components are in gitingore for this generator).
If you need to override something: import original scss file, and override what you need.