I deployed my application, I find that the loading time is much .. there isa way to compress css and js files ? , knowing that I use in each page that the necessary and sometimes js version minified .. thank you
In my experience with compressing JS files, use UglifyJS, and CSS files I prefer using Compass with Sass, which not only can minify CSS files, but also support the superior (personal opinion) SCSS-syntax.
Both engines work well along with GruntJS, which is a NPM module and a tool to perform various tasks. I use the following plugins with Grunt:
Grunt-contrib-compass for the Compass tasks
Grunt-contrib-uglify for the UglifyJS tasks
Additionally Grunt-contrib-concat if you just want to concatenate various files
And several other modules to run a local server, optimize images, etc. Have a look at the plugins page for GruntJS.
Related
I am using Webstorm a start a angularjs project. I've created a lot of *.js files. I have the include them using the tag one by one in the html files. whenever I created a new js file, I have to create the script tag.
The things I needed is just like gulp-concat, but without minifying. minified code are hard to debug.
Can anyone help on this? Thanks!
WebStorm doesn't have any built-in functions for combining files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-concat task (https://github.com/gruntjs/grunt-contrib-concat). It supports merging files. You can run the task using Node.js run configuration, or configure it as a file watcher, or use Grunt console.
Browserify (http://browserify.org/) is one more way to go - it allows using commonjs-style syntax when developing front-end applications, combining the files into a single file for production
Or, try Webpack (https://webpack.github.io/) - it's a modern powerful module bundler
I wanted to create a javascript code library that will be eventually merged into one single minified code file. I was trying to search on how to be able to have these code files separated for development, but I could only find how to have a javascript file add a different javascript file to an existing html page. How do you separate javascript files for development only?
Develop each module of your library as separate .js files then setup a task running tool such as Grunt. You will need node.js along with npm to install Grunt.
You can then use the grunt-contrib-concat plugin to concatenate your javascript files together, and minify it using grunt-contrib-uglify.
These files are separately developed and combined into a single file generally known as minification and bundling, you could use asset compressor in Ruby on Rails in case you are developing in Ruby, otherwise pure javascript development uses Grunt based system, check UglifyJS.
I'm trying to learn a modern Javascript workflow for client-side development, so I'm giving a try to Grunt.
I want to require some libraries like AngularJS, Bootstrap or moment.js and have them installed in my dist directory. If possible I would like to have some package management for them.
I've given a look at Bower and grunt-bower-task, but I'm not sure up to which point they are suitable for this task, as not all packages include minified versions and grunt-bower-task seems to ignore those anyway.
Is there a Grunt-friendly package management solution to manage client-side Javascript libraries or should I keep downloading them to a vendor folder and just tell Grunt to copy them to the dist folder in their .js or .min.js variant?
I think bower and grunt have different responsabilities. Bower for client package management and grunt for building (and other tasks). At least I use them for that. Installing angularjs and bootstrap with bower, it downloads both minified and development libraries. If not you can always minified them with grunt.
And yes, i believe that controlling your packages with bower and building your application with grunt (using copy, concat, uglify, etc. tasks) is the best practice.
You can check Component also, its an equivalent for bower.
I tried to hack something like this up once using grunt-curl - just defining a list of libraries I wanted to include, and downloading them from cdnjs.com, which I believe keeps the links updated to current versions. I did this within a separate install task.
It wasn't the most elegant solution, but it did what I needed at the time. I probably wouldn't suggest it if you're wanting stronger control of the packages (ie. versions) you use - but then again if you do, why not just use Bower?
Hopefully, this is not a duplicate question.
I want to know the best practice, as i am very new to the whole front-end development, how people develop/test javascript/css and at the same time ship their code and all dependencies as minified. What kind of build process do you use?
Here is an example: say you have style.css and app.js with dependencies to bootstrap.css and jquery.js.
How do you include full versions of these files in html when developing and then use the minified versions when releasing? Do you minify the third-party css/js such as jquery and bootstrap yourself using YUI compressor (or some other tool similar) or use the downloaded minified versions? How do you swap between full versions of code and the minified versions?
Thanks.
I would maintain your codebase only uncompressed and use ant (http://ant.apache.org/) or something similar to create a build process which runs your tests, maybe runs jslint over your code, and then minifies it and copies it into a structure that is ready to be released.
The build could name the files as required so you dont have to worry about the minified filenames being different.
I do this by using pre-compilers for css and javascript. There are many ways to do this effectively, I write the code using SASS and use two apps: prepos (win) & scout (win/osx) to compile the code either minified or human readable.
I recommend that you watch this video on this topic by CSS Tricks:
http://css-tricks.com/video-screencasts/124-a-modern-web-designers-workflow/
There is really two questions here.
1) should minification be done by hand or done as part of a build?
2) should the minified files be version controlled?
I"m trying to define a go forward path for the current project that i'm working on. I've done some speed evaluations and I believe that my current site could have big performance improvements with just adding some compression / minification.
Here is the basic setup
IBM Commerce 6.0
a ton of large js files (nothing has been minified or compressed)
a ton of large css files (nothing has been minified or compressed)
should minification be done by hand or done as part of a build?
As part of the build. That way you can't forget to do it. You don't usually need minified code in the development environment, you can build by hand if you find you need to debug problems that only reveal themselves in minified code.
You can test the minified code on your staging server.
should the minified files be version controlled?
Not by your source control. If you have an archive of historic build artefacts then they should be part of that.
That all depends.
Sometimes it's useful to have this done on the fly based on a configuration setting. For example, if you're deploying to a test environment and you have minified your JS and discover a bug that only occurs in that environment, it's often handy to flick a switch so your application starts serving un-minified source files for debugging.
you Can Use smartoptimizer That Can minify and compressed your JS and CSS
And Can cache This file Until No Change Happen In File.
Download smartoptimizer
one of the this website project is about minify and compressed js or CSS with php. the advantage of this program is detect js and css then minify and compressed .if js or css change this program detect it and renew minify and compressed file