How best to we get the default grunt file from the angular generator to stop trying to use jshint?
I've tried playing with various settings but the file is so complex it keeps breaking the build.
Just comment out the jshint task.
Related
I'm dealing with an ASP.net project that's maintained by a couple of people via git.
We're looking to minify the CSS files at build time and have checked out the bundle and minify addon however this doesn't appear to offer an option for the minified code to be regenerated from the source files at each build.
Is there a better way for us to minify our source css files on each build?
Understanding your question right, you want to concat and minify your css sources and time you build or deploy.
I do not now how your build stack look like, so I can guess only, but using css files I would use something like grunt or gulp.
On my self I prefer gulp. It is easy to create a task which concat, minify or also auto prefix your css files.
Once your task is created you can add it to your build script, task or bash.
This way works also fine with CI like wercker or travis.
You can use Microsoft Ajax Minifier after build.
Explained here: https://www.codeproject.com/Articles/182690/Minify-Javascript-and-CSS-using-Microsoft-Ajax-Min
Or if you have integration with Jenkins then after build step you can call bat file and run minification on folder of your build directory.
For multiple technology projects, You can create exe based on Microsoft Ajax Minifier and after all builds are done, Run this exe using bat command from Jenking only to minify all the css and js files.
I have integrated this with PHP, ASP.Net and Silverlight code after build of these projects.
One better way is to make your file to online file (like CDN link github can help you in that) and next rather then adding all those css add that link which will be saving much of the build time.
Try to minify your file.
Try to make an online link file.
I have a project which completely build with Backbone and reruiejs. For production build we are heavily dependent on grunt.
For JS modules, i have using grunt requirejs.
After evaluating Webpack module loader, i thought of trying it out in my project but not sure to what extent i should use it and how to implement the same.
Any reference point or example project ?
Here is a short, but very informative tutorial by Pete Hunt:
https://github.com/petehunt/webpack-howto
It goes through building a simple build script. After you get the hang of it, you'll be able to make your own scripts in no time.
If you use Webpack, it makes using Grunt & RequireJS redundant & unnecessary because Webpack can do all that for you. Plus, it will be tedious to maintain multiple build scripts in all these tools.
When I have jshint sbt plugin enable in my Play project, I get these annoying errors which are really not errors. How can I turn them off, or avoid them?
Thanks
jshint is doing exactly what it is supposed to do. You can configure its errors with a standard .jshintrc file in the project root.
The first error exists because it should be window.alert(s).
I'm using the accordion, tooltips and transition components of UI Bootstrap.
I can create a custom build with the online tool on the UI Bootstrap website, which will create a minified and non-minified JS file containing only the components I selected, without overhead.
However, I don't want to use the online tool to compile my custom version of UI Bootstrap, instead I want to compile my own version locally, preferably using the tools I already use; Bower, Grunt and NPM.
So my question: How can I create my own version of UI Bootstrap locally?
bower install angular-ui-bootstrap, and then calling Grunt build in bower_components/angular-ui-bootstrap creates a UI Bootstrap build that includes all modules, there's probably a way to do the same with only a subset of the modules, but I could not figure this out.
It can be done by using the following command
grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN
For example if you require the build to contain only tabs and buttons module , then the grunt command will be like
grunt build:tabs:buttons
The generated files will be present in dist folder
For the list of module names , check all folder names in src folder
The documentation for this is sparse , but if you check the Gruntfile.js , where they register the build task , they mention about how to build modules selectively
It is not as easy as I expected (and as it should be).
Take a look at the Gruntfile.js of the project. You will see that they do quite a lot. Converting HTML and CSS to JS, concating all the scripts in such way they are loadable by others. Moreover the file is quite difficult for orientation; it even includes custom tasks.
To mimic its behaviour I suggest this: Download it via Bower as you normally do. Copy its node dependecies to your package.json dependencies. Then copy the Gruntfile.js, change he routes, and try deleting some parts of the code until you reach a point when you cannot remove more lines without breaking it. It is not a nice way, it should be however successful.
If one had a lot of time, the build script is a good candidate for a deep refactoring. Moving custom tasks to standalone files (or projects), documenting the flow, and maybe implementing standard tasks for some steps (e.g. CSS minification).
After a somewhat comprehensive evaluation of IDEs for use in front end development, WebStorm leads the pack I think.
The one missing piece is that we can't configure JSHint the way we need to. The WebStorm preferences GUI provides some options, but not the full set. The GUI only lets you configure 15 of the 30 or so actual available options.
This is a problem because we don't want to change our coding practices just because an IDE doesn't let us configure linting the way we want.
Is there a hacky way to go in and adjust the JSHint library behind the scenes for WebStorm?
You can configure all the options you'd like in a .jshintrc file located in the root directory of your project. This will be a project-wide setting.
From https://www.jetbrains.com/webstorm/webhelp/jshint.html:
Use config files
Select this check box to have the code verified according to the settings from a configuration file. A configuration file is a JSON file with the extension .jshintrc that specifies which JSHint options should be enabled or disabled. WebStorm will look for a .jshintrc file in the working directory. If the search fails, WebStorm will search in the parent folder, then again in the parent folder. The process is repeated until WebStorm finds a .jshintrc or reaches the project root. To have WebStorm still run verification in this case, specify the default configuration file to use.
I've been using this for a while and it works great. Plus you can commit it to your repo and ensure the entire team follows the same code style. Also a great place to add globals.
I'm not aware of any hacky way to do it, but you can vote for the existing feature request.
There's a per-file solution that works, but is not ideal. Would prefer an IDE or project-wide fix/hack.
Set JSHint options at the top of your file:
/*jshint laxcomma:true, asi:true */