What is Reddit's opinion of Grunt?

From 3.5 billion Reddit comments

See, this right here. I drill this shit into my students' heads. "Have backups. Backup your backups." "Commit early. Commit often." "Don't put your logic on the client side."

I show examples. I test them. And yet, every single project, I get something like the following:

>why am I getting a CORS error?

>Well, looks like you're sending Ajax requests from your page to like 5 different urls. You have a basic server running, why didn't you just extrapolate that logic there? "

>ugh I know it's bad practice but I just wanted to get it done real quick.

Boggles the mind why people make things harder on themselves.

OP here's what you need to do.

You already know Javascript, so go to heroku and read through their" restful MEAN " tutorial. It shows an extremely basic node/express server.

Change your app to put all that pokecalc hard earned logic on the server. Client should just send a GET request to yourapp /calculate or something.

Learn about grunt or gulp, and code minification.

edit: heroku : https://devcenter.heroku.com/articles/mean-apps-restful-api

gruntjs: http://gruntjs.com/

Nobody has given a serious answer, but I remember the confusion of starting out so I'll go for it.

You are a web developer and have lots of tedious tasks you need to complete every time you need to push an update to your website or whatever:

• Join up all your JavaScript files (and bower/npm dependencies JavaScript files).

• Compile SCSS/Less to CSS.

• Minify JavaScript/HTML/CSS.

• Optimise images.

• Compile Typescript/ES6/CoffeeScript to ES5.

... and so on.

Grunt is a tool that helps* you write shit that does all the above. You could do it all yourself without Grunt, Gulp or whatever, but it would be hassle and would probably involve calling a whole lot of command line tools every time you need to update your production server for example.

* I said "helps" because Grunt doesn't do all that work on its own necessarily. Instead there are lots of plugins that are written for Grunt that do little individual tasks. E.g. one plugin might just be for concatenating JavaScript for example. You piece all these plugins together with Grunt and divide them into "tasks". You might have a "build" task that does three or four steps to get your site ready for release. Or you might have a "test" tasks that runs all your tests.

Not exactly ELI5 but that would take a long time to explain to a five year old.

Oh it's like a different version of grunt!

Basically it's a javascript task runner, allowing you to - for example - very easily watch files for changes and compile them (like scss files) or writing custom build tasks for your application.

It's pretty widely used, I believe, but it's not strictly necessary. You can create your own scripts quite easily with pure nodejs.

http://gruntjs.com/plugins

How I typically use it, roughly in order of operation:

• run JSHint on custom Grunt config files
• run JSHint on the code
• compile HTML templates to JS
• run CSS processing (LESS/SASS/etc.)
• package all code (js, css, templates, static assets, etc.) into modules
• minify modules (uglify js, mincss, images to sprites)
• run unit tests
• clean output dir
• promote code from temp to output dir
• run e2e tests

If you wish to use any of the altjs flavors (Coffeescript, TypeScript, etc.) then you'd also add the step(s) for their compiler/transpiler where needed.

On the technical side:

Your CSS looks like it's based solely on single classes and IDs, with a very verbose naming scheme. I'd recommend taking some time to pick up:

1) more complex selectors,

2) using multiple classes on elements and sharing rules,

3) using a task runner like grunt to minimize and concatenate css/js,

4) taking advantage of semantic html5

I also cringe when I see something hosted on windows that doesn't need to be, but that's just personal preference. Unless you're doing dotNet or something that requires you to use it, it's worth jumping on the linux bandwagon for servers at the minimum. Just my humble opinion =)

You have the right idea for setting up your environment. As for testing I'm not entirely sure about that. I'm not actually sure if you can use Arcanist with Github, but that might do what you're after.

For compiling your assets, you could use Grunt. Get grunt-less-contrib for compiling LESS, but you can do SO much with Grunt. You can also leave Grunt watching sets of files for changes to run certain tasks automatically, i.e. if you change your LESS; Grunt would run a task to compile the LESS and then minify it.

Usually what I end up doing when starting my environment is something like this:

$ vagrant up $ grunt $ grunt watch

And with those 3 lines I've downloaded and provisioned my virtual machine, got it running with my code mounted and then made sure that my assets are compiled completely and are up to date, then I run grunt watch to continue watching my files and updating them when necessary.

You'll need to learn the lingo. If you want to work in a software startup:

Don't say: 'Have you tried putting it in the cloud?' Clouds are ephemeral, very 2009

Do say 'Have you tried putting it on the blockchain?' This is good, because nobody will quite know what you mean, and you'll sound clever. Using the phrase 'the internet of things' is also just about acceptable, but make sure you abbreviate it.

Do use: Javascript and not any other language. Not vanilla-js (unless you're using the vanilla js framework. Make sure it's obscure. Make sure you grunt when you talk - all the cool kids grunt. Be mean to your coworkers - being mean shows you are self-confident. The main point is that you should not use any framework or library that has a long track history of success.

Grunt requires node to run, but it has useful features that work with lots of non-node things. Visit the Grunt.js plugins page and search for something relevant to your development -- I'd almost guarantee there's a useful plugin.

Also, read Grunt for People Who Think Things Like Grunt are Weird and Hard by Chris Coyier -- it'll get you up and going with Grunt in a non node specific workflow in no time.

This isn't a bug, it's a security feature of the browser. The images must come from the same domain as the application was served from, with the following exceptions:

• You override it at the browser level. For chrome, launch it with --disable-web-security flag

• You set crossOrigin to allow another origin url, or "" to allow any origin. This must be accompanied by the CORS header Access-Control-Allow-Origin on the server that hosts the resource. For example, imgur permits cross-origin requests.

Here is a function I wrote a while ago to load textures cross-origin

loadTexture = function(url, uniform, cb){ var image = document.createElement( 'img' ); image.crossOrigin = ''; var texture = new THREE.Texture( image ); image.onload = function() { texture.needsUpdate = true; uniform.value = texture; if (typeof(cb) !== 'undefined'){ cb(this); } }; image.src = url; }

If you're running locally, only the first of these options will help. In general, it's a good idea to run a local webserver for this sort of thing. Check out grunt for a simple build tool that can run a local web server with livereload.

Thanks for sharing!

I should explain that the project started out as a jokey attempt to demonstrate that anything grunt can do, can be done easily in bash, so the interface is designed to mimic how grunt works mostly :)

After a while I realised that the tool might actually stand a chance of being useful to someone, and so I'm putting it out there to see what people think.

I think the main point of manuel is to provide a little bit of structure on top of bash, the kind of structure that users of other task-runner tools (like grunt, rake or fabric) have become accustomed to. The secondary point of manuel is to be a bit of fun :)

As someone stated here: Promises. You've probably started looking at those already.

Also: Frameworks. Certain concepts (including promises) are included in frameworks like AngularJS. You will find these concepts yourself as you explore the framework. Angular is also incredibly popular and in-demand right now.

Grunt task-runner: This is how front-end web development is managed these days. Learn how to make your own gruntfile task that will compile LESS into CSS and start a web-server with livereload for you. This should only require ~3 tasks and be a good starting point.

LESS: if you don't know already, LESS is fucking awesome. Don't ever write CSS again ever.

Build automation is the main point.

When you're making sizable web apps, you're going to want to keep your code well organised. Split into many different modules / files, all well commented, etc.

However, when it comes to actually deploying your site, you don't want that. Multiple files means multiple HTTP requests, which is extra work for the client and your server. All those comments and pretty spacing also makes the files bigger, therefore slower to download. Your users don't need that.

So, you go through a build process which combines many files into one, and "minifies" then to remove extra characters, so the files are smaller and download faster.

Building can take quite a long time, and is something that needs done often. So, instead of repeating those tasks over and over, you write scripts to do it for you. Grunt and Gulp are task runner libraries that help with that.

The file concatenation and minification is just one example (albeit one that happens in almost every case) - those libraries have thousands of extensions for helping you script pretty much any common task you need to do in web apps.

Modules can depend on other modules - use dependency injection the same way you would were it a service. If the project has multiple top-level modules, create a single parent module that depends on all of them, then inject that parent module into your new project.

To get the code in one JS file, just put it in one JS file. Copy and paste, or use some automation tool (concat) if you're going to be updating the old project and want to keep it maintainable

okay, it sounds like you may be new to web development or something, but seriously, check out grunt or gulp, and learn how to use it in your workflow. I guarantee that you will ad least double the speed of your front end development workflow.

Here is grunt getting started Here is gulp getting started

This is really amazing but the plug-in selection is too small. I can't pull in contrib-sass... Maybe you can pull the list from here somehow: http://gruntjs.com/plugins

or this: https://github.com/gruntjs/grunt-plugin-list

For loading time you should look into Grunt and automate the compression of all of your CSS & JS assets into a single minified file.

You've got a total of 17 requests for JS and 7 for CSS totalling at 4s of loading time over my connection.

It also seems like you have some problem with redundant JS files, for example loading JQuery-UI and JQuery-UI-Custom.

the full terminal output is:

npm WARN saveError ENOENT: no such file or directory, open '/var/www/html/wpmlai45/package.json' npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN enoent ENOENT: no such file or directory, open '/var/www/html/wpmlai45/package.json' npm WARN wpmlai45 No description npm WARN wpmlai45 No repository field. npm WARN wpmlai45 No README data npm WARN wpmlai45 No license field.

up to date in 0.154s grunt-cli: The grunt command line interface (v1.2.0)

Fatal error: Unable to find local grunt.

If you're seeing this message, grunt hasn't been installed locally to your project. For more information about installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

Thanks for the great work! Although I am stuck on the grunt file and have tried every recommended fix to no avail. Regardless of what I try, I am always met with the following error npm WARN [email protected] requires a peer of grunt@~0.4.5 but none was installed. I also found this under the Peer Dependencies section of the Grunt release, which seems to relate to the problem. Any ideas on a fix? Thanks again!

Docker is kind of complicated, but it's what I use to ship and distribute applications that I write between servers, without having to worry about dependencies and such being installed on those servers. Bash is a shell, and generally when you want to write linux command line utilities, you use bash. Basically, when I want to build my application, and put it on a server somewhere else, I run the grunt task to do so.

http://ericnish.io/blog/compile-less-files-with-grunt/

Here's a tutorial on automatically compiling your CSS files with LESS.

If you really wanna move files around and stuff with grunt, http://gruntjs.com/getting-started

You should start here. follow the tutorials, and really read up on how grunt works, and what exactly it does. You can just as easily maintain file structure with the command line or an IDE though. I think in a lot of ways, grunt and gulp are great for some tasks. But, for many tasks, it's just a bit too much, and kind of over complicates things.

Use grunt or gulp with live reload. You will need to change the local server to 0.0.0.0 in the grunt file. Then open the page in a browser on all devices your testing with by going to the IP of the computer your server is running on (your dev machine most likley).

Then by simply saving the page it will auto reload across all your devices. If your having trouble setting this up look into Yeoman, it has templates available for most project types and usually has most of this stuff set up by default.

The benefits of a task runner (such a grunt) extent well beyond simply live reload. You can have it compile Sass on save, run JSHint, uglify and minify code etc. Its really worth the effort to learn.

Good luck.

There are many cli (command line interface) tools helpful for front-end devs.

In make a website projects codecademy uses Bootstrap. I am not a big fan of Bootstrap, I prefer to use Foundation. I love this framework, because with one, simple command I can instantly create new project with all the necessary files:

foundation nameOfProject --libsass

without any clicking, copying and writing boilerplate code.

As a front-end dev you will notice that in big projects it's just hard to keep an eye on all external resources you use. During development process, at the end of every day you will have to run repeatedly many tasks, you will probably want to run tests, beautify your code, run linters and push project files to your repository. Every day, same tasks, it's just boring. Fortunately we have some powerful cli tools to resolve these problems. For example:

• bower - package manager
• grunt - task runner

And I don't know any developer who doesn't use any version control system. You probably heard about GitHub, GitHub is built around git, awesome vcs. You can of course use web interface to manage your GitHub repositories, but full power of git is hidden inside your terminal.

I don't know how ssh connections are useful for front-end developers, so I just will say - you have to use terminal :)

The Grunt site has a rather good getting started section that explains quite a bit - But a TLDR; is when you start a new project and npm install the packages that you want to use, it will create a gruntfile.js and you write you tasks in there. Then you terminal/command prompt to the folder and then you can run the tasks. So for my code above it would be grunt watch

I created a script using node.js, grunt, git, and a few grunt tasks that syncs .html files to a remote server for our email builds. Specifically, it watches a folder, then runs a few shell commands to sync everything up, and waits in the command line for those updates.

Try using Grunt.

I tested your file using grunt-contrib-cssmin using the default parameters in the example, and the minification was done without losing the space between [role] and a.button.

>I still don't really understand what is essential and what is just personal preference.

All those tools you mentioned, it's essential to know to to run them. The personal preference part comes in when you want to customize that process. Like you could make a grunt task to both compile and minify and even base it on which directory to include files from and where to output with what names or even run some extra commands after that etc etc.

But for the most basic stuff, you have to just know how to run them.

http://gruntjs.com/getting-started should give you a basic overview of how Grunt works. You'll find that it has plugins to achieve most of the functionality. Googling "grunt <functionality>" will lead you to the plugin you want, like grunt sass.

Same with Bower and if you've figured out Grunt you've probably already installed Node and NPM. They're all basically the same in a sense that if you figure one of them out, others will start to make sense automatically.

Are you perhaps using flask-assets? It keeps a .webassets-cache folder that I sometimes had to empty to get it to force a change.

If that's the case my recommendation for Javascript (and LESS/SASS/CSS) development is to instead use Grunt for bundling files and the like. I run a grunt watch task, it watches for changes in my files, and automatically recompiles them according to rules I set.

To prevent browser caching of JS you can add a query string to the file name such as application.min.js?v=1833434344, where v can be a random value, a version number you set or the current unix timestamp. Also works for CSS.

Hope this in any way helps!

You are looking for grunt's templating system (how it does these resolutions). You can run it manually on a string via grunt.template.process:

http://gruntjs.com/api/grunt.template

grunt.template.process(config.scripts.main, config); // './client/scripts/index.coffee'

Okay so what you are seeing with those pages could be any number of methods, the most probable method is a standard page layout with a container and an iframe or similar which pulls the content from a cms or database.

I think dreamweaver has/had (I haven't worked in it for ages) a templating method for standard html pages but it's just an automation of manually replacing code.

If you're really interested in learning more about making html and css process more streamlined, you can look at http://assemble.io/ , http://gruntjs.com/ and http://nodejs.org/. This is only the beginning of hard core front-ending and there's a whole world of things out there that makes like a whole lot easier.

Surprised no one has suggested grunt and ftp-deploy all you need is node.js and you can install both npm

Yeah can set up grunt to watch and convert: http://gruntjs.com/

Personally I use Codekit ($29) because I already had a copy available. It's a nice GUI for general workflow stuff like that: https://incident57.com/codekit/

Ideally, you should develop your website with separate JS files for different functionality. That way, if you decide to remove the slider, you can simply remove the HTML code and JS file.

In production, a live website should serve as few JS files as possible. Generally speaking, the less HTTP requests, the better. You can use something like Grunt to automatically combine those multiple JS files into a single minified file.

Grunt is a 'task runner' written in nodejs. You'll probably think this is useful and cool: http://gruntjs.com

Outside of grunt, you might just ship a script with your git repo that will convert your scripts on demand.

There may be a small miscommunication there - my data is largely NOT binary. I track very few binary assets, we're talking about minifying HTML/CSS/JS files into a "package" that is essentially just a directory structure organized and concatenated for pulling into staging/prod once my local dev process is complete etc.

The process is much like this and uses grunt tasks mostly to create the "package".

Its a bit of a steep learning curve, but if you are willing to learn, Grunt can automate many tasks.

I have tasks that watch all my LESS and JS files, compiles them to one minified file, and then refreshes my browser. All I do is save a file and I will see the results show up on my second screen.

Grunt, or its alternatives, is something you will want to learn anyway as it makes working with any kind of CSS preprocessor (LESS or SASS) a lot easier.

You should be able to do this fairly easily with a build tool like Grunt. You'd just set up build targets for cleaning, running your command, then running your test. Then create a target which runs them each in sequence. I've got a somewhat similar setup for testing a Grunt plugin here.

It's worth pointing out, though, that this sort of test may be of very limited use, since it will only tell you that the files are different, not whether the differences are meaningful.

You can make a custom grunt task. See http://gruntjs.com/creating-tasks for more details, but it would look something like this:

grunt.registerTask('taskName', 'Task description', function(){

})

Look at setting up a grunt task for deployment. It also provides tuns of fun things. You can lint your code and process your CSS/JS with ease. Even live compile and insert your CSS with watchers while you develop.

I use git to manage files using a variant of this article. I end up with quite a few useless commits but it makes it easy to manage large projects with multiple people working on it. Git has a steep learning curve but is great after you get the hang of it. There are also many GUI's out there for it you could use. Given how prevalent git is, it's good to know it whether you use it or not.

As far as keeping the DB in sync, I typically create a deploy.php file is run every time I push to the server. It runs any DB changes I want to do. For larger applications, I often use Laravel and their migration system.

In regards to minification, I personally use Grunt. I have a task to setup to minify css, js, and imgs. I also run it every time I push.

Changing settings depending on your environment is easy. Just need to create a script to read the hostname or server address and change the settings accordingly.

All of these are tied to git hooks to run automatically.

I'm sure many of us can relate; Like many others I'm in the exact same position now. I don't see it mentioned here already but one path you can take is to work on improving your workflow. Since I can't invest time in learning a lot of cutting edge front-end things where I'm working now, I instead invest time learning things like Grunt, Jenkins, or Templify . If you're getting things done faster as a result at your current job, you'll have more room to expand and your public-facing work won't really be affected.

They aren't always as fun as playing around with html5, but they can make your work life a lot easier and also are good skills to have - a future job offer may require you know how to integrate or utilize one of these systems. Additionally if you end up in a position where you can play with cutting edge stuff on a daily basis, your workflow improvements will help tremendously.

Grunt.js is perfect for setting web apps toolchain. It's open source, platform independent, has all the plugin you need, configuration is extra simple...

Most important fact is that with Hammer, your code is dependent to the tool. That's something you don't want.

Also, I prefer CLI to GUI.