What is Reddit's opinion of Gulp.js?

From 3.5 billion Reddit comments

gulp is waaaay better than grunt, and I haven't looked back since I switched.

Also worth checking out is slush, which is the gulp equivalent of yeoman

I agree. Too many products assume the random stranger knows what they're offering. Take gulp for example - a newbie to javascript development might have a hard time trying to figure out what this piece of software is for.

• Combine and minify your CSS and Javascript
• Remove unnecessary header (EXIF) data and compress images
• Include your JavaScript code right before the closing body tag.
• Gzip static assets
• Use a CDN
• Check out google page speed test for more tips.
• [edit] check out tools like gulp or grunt to help automate some of this work.

A task runner such as grunt or gulp and livereload for development paired with git for versioning/publishing. Sublime also has a lot of extendability in plugins including ones for git using package control and FTP as well.

A great introduction to SASS is with a program called Compass. Basically, it looks at your .sass or .scss file and automatically converts it to CSS wherever you want it to.

Once you get your feet wet, I recommend getting into Gulp. It's a taskrunner that will eliminate a lot of the most tedious parts of frontend development for you (compiling SASS, validating and minifying Javascript, optimizing images, renaming files, reloading your browser on save, etc.). Seriously, one hour of a tutorial will save you hundreds on personal projects and get you hired at agencies that use taskrunners in their workflow (as most respectable ones do).

Best part about Gulp is, once you create your workflow, you can use it for personal projects over and over. My personal gulpfile has made it to a few high-budget production sites, too.

EDIT: Fairly sure this is the tutorial I watched just about a year ago that changed my career.

Gulp is a build system. Webpack is a bundler. These are not the same things, although you could do some things with both of them.

I'd suggest you looking at the list of plugins and loaders for webpack and compare them to gulps plugins to find out which one suits your needs.

For development, it might make sense to namespace your CSS files for large chunks of code. And then you run a process to consolidate all of those files into one file to be served as an asset. Gulp.js exists for automated tasks like these. I highly recommend checking it out and using it alongside something like SASS.

> I've gone back and forth between having them auto-compile to their equivalent .CSS file in the same directory

Compile only the "front" files. For instance, I will have a main.less and use @import to include the relevant less needs. You don't compile each one individually.

So if you take a look at bootstrap this wil compile down to a single file. You also keep your .less source files out of your public directory and compile the CSS into the public directory.

> I've also tried having a /src and /lib directory, and using a tool like Grunt to build

Actually, I've found it's the best way. Grunt can be a little complex though. Gulp is a little easier. For a very simple example:

var gulp = require('gulp'); var less = require('gulp-less');

var sources = { less: { main: 'assets/less/main.less' } };

var targets = { css: 'public/css' };

gulp.task('less', function() { return gulp.src(sources.less.main) .pipe(less()) .pipe(gulp.dest(targets.css)); });

gulp.task('watch', function () { gulp.watch(sources.less.main, ['less']); });

gulp.task('default', ['less', 'watch']);

Then from the command line you run "gulp" and it will recompile your sheets and start watching for changes. Every time you change a less file, the CSS will update. There's also a gulp-livereload task which can reload your browser each time you make a change.

Of course, all of this is possible with grunt. I just find gulp a little easier to set up.

You should use gulp or grunt rather than an application or IDE. Why? Because it's much more flexible and agnostic to your platform/editor which makes it more portable. In terms of automation of frontend tasks, both can do SO much more than your IDE can even dream of so they are well worth a look.

Check out gulp, as well. The configuration is slightly trickier (although I actually prefer it), and there are fewer plugins available, but it's a tonne faster. When I used Grunt, I used to have to wait a couple seconds between saving my LESS / SCSS and it actually updating in the browser because of the amount of time it took to parse, but with gulp it's pretty much instant.

I would recommend checking out http://gulpjs.com or https://gruntjs.com/getting-started to get started with build pipeline tools. What they are basically doing is chaining tasks together and allowing you to group them by commands. This can be anything from bundling Js, to transpiling sass or watching your files for changes and refreshing the browser. For the tasks you want there are several plugins available, so just google for things like "gulp sass" and you should be good to go real quick. As you specifically asked for reloading after changes I would recommend https://browsersync.io which is available for noth pipelining tools mentioned above. Hope that helps :) And from personal experience, having this set up well will save you unspoken amounts of time, so spend some of that to get a better understanding of those tools and the ideas behind them.

If you don't want to use the CDN, you should know that you don't want to require Bootstrap via Composer. Composer does dependency management for PHP libraries, and Bootstrap is a front-end library to be managed by something like bower or npm. So you have a couple options, depending on your skillset. In order of complication:

• Grab it from the CDN like /u/jofad mentioned
• Download it from the website, place it somewhere like public/css, and then reference the main file via a link tag just like you would with the CDN
• Fetch it via npm or bower, start writing LESS or Sass, and get real friendly with a task runner like gulp or grunt or find an app for compiling LESS/Sass that you like.

For the last of those, there are tutorials out there. I wrote a pretty light one that talks about Bootstrap outside the scope of Laravel and the ways you can utilize it.

> recently learned JavaScript/Jquery

If you aren't familiar with javascript's prototypal nature, closures, promises, and other things of that nature, you might want to just keep focusing on javascript.

Also, if you aren't already using it, consider trying to figure out how to implement Gulp.js in your workflow.

Consider learning a CSS preprocessor (Sass, Less, Stylus) / alternative feature set (PostCSS).

Consider learning Typescript. Especially if you plan on learning Angular 2.0, as Microsoft and Google have teamed up and doubled down on Typescript. http://www.typescriptlang.org/

• Console is blowing up with Cannot set/read property 'innerHTML' of null errors.
• I don't understand why I need an old account to reset my game. Resetting makes testing features easier.
• Why do I need to wait to change the theme?
• The default password is "password" which actually doesn't work. The field for the password is plaintext, which is HORRIBLE. Also, I can only change once per hour?
• 30 seconds per save?
• Given all these time constraints, are you writing all the data to a server? There's no limit to writing to localStorage. I see you're converting to base64, but still, not need for all these restraints. Ask yourself, "How does this affect my user?"
• "Achievements" is misspelled.
• Your layout is convoluted. Buttons in columns that change other columns and stacked features and tabs in various places. Simplify and condense.
• Starting click investment is 50 if you go to the building tab first, or >150 if you don't think to check around. Pretty steep if your user doesn't investigate first.
• The tooltip cost for units seems to be different than actual cost.
• You have (at least) 7 different setIntervals. Your code could improve a bit if you condense them to a single function that runs off time elapsed.
• You should separate your code, at least for your development build. 2000 lines for a single file is obscene. Grunt or Gulp can help you condense for a production build.
• I opened the code to figure out how to get new buildings and units, because I have no clue how that works. Spacing and comments are all over the place, so I couldn't find anything. Magically unlocked a new unit but I have no idea how.
• The "Buildings" button stopped working once I started poking around. I'm not entirely sure how to duplicate this bug.
• Is there a reason you've got variables for everything instead of arrays? Just curious.

It's not that big of a jump from 5 to 6 and if you learn a build tool like Gulp you can auto compile your ES6 files to ES5 automatically via Babel. I say go for it. It will make you a better developer and you will be more productive as well.

It's pretty hard to beat <code>gulp</code> for generic build system management, although if all you're wanting is a Less compiler you might consider running 'lessc' directly.

If a company is making money without "keeping up new frameworks" why should they change ? Why is it on you to "sell" them some new technology ? And the documentation for this "new framework/tool" is so poor it doesn't even explain what it is or what it does. What does "automate my workflow" mean ? Makefiles were doing that 30 years ago, so I would hardly classify gulp as "new". It's a new ripoff on an old idea, possibly. Also, the whole project is maintained by 7 volunteers. Why should any company invest time adopting a product that is maintained by such a small and fragmented group of people ? What if they find something even newer and shiny, and just vanish? then what happens to gulp ?

When programming gets more complex it is a best practice to always 'separate concerns'. This usually means keeping functional things away from visual things. In HTML/CSS the functional part is the markup and the stylesheet the visual.

Also, once you have more than one web page, you have to duplicate all your CSS on each page if you want to keep your styles consistent. I've recently started using SCSS and have a separate SCSS file for each 'module' of a site I am building (one for the main styles, one for the sidebar etc.) I then use gulp to process all the SCSS files into one and include that.

Unfortunately you more or less have to write the styles inline, however you can use an alternative method.

I haven't really explored it much but with Gulp.js you're able to write a gulp file which can allow you to use an external style sheet. When you build the project with Gulp it will strip out the contents of the external .css and place the styles inline. This also allows you to use something like SASS. You'll have to search around as I'm unable to share the one I have access too. Hope this helps

If you're worried about using the CLI then I have some bad news for you - you're falling behind. You really need to be strong with using your terminal.

That said, use grunt or gulp to do this for you. It's incredibly easy to set up.

Or, you can use codekit which requires almost no javascript knowledge to set up or use.

That said, you should really brush up on your CLI skills.

The claims of it being bleeding edge, and that there are 284 plugins available, date this presentation. For perspective the gulp plugin registry currently lists 1897 plugins.

Are you willing to learn something new right away? You can use a lot of text editors (Sublime for instance) and couple it with a task runner like Gulp or Grunt to have the a live reload feature. Even in different browsers!
Otherwise, Atom, Coda, LightTable and Brackets will all do this, as far as I know. You will be well served with any of those.

One thing at a time. Most of the frameworks and tools around mostly make your life more convenient, or assist you with a very specific task. You don't need them.

In fact, I'd argue that you're better off by delving deep into the vanilla languages and only using tools and frameworks once you figure out why you actually want to use them.

If you're not using any version control already you should probably pick that up first. You'll use it everywhere and you'll love it more for every passing day. I use Git through Bitbucket, but there are other version control systems and multiple ways to host and manage your repositories.

A build system is, imo, also very important. I use gulp to concatenate files, minify assets, compile preprocessed languages, compress images and run local servers with live reloading. It provides the core for all of my development and I can easily plug in any new framework or language or whatever.

Sounds like a case for using some sort of watcher while you edit.

GruntJS Gulp come to mind immediately, there are other options that can be helpful. Forever is great for building web applications.

Transmit: Great FTP app that offers a nicer GUI than FileZilla imho.

If you do front end, Gulp is a great build tool for watching sass stylesheets and js files. Faster than grunt and less code required.

+1 for Vagrant, takes a lot of the pain out of serving sites locally, only drawback is VirtualBox memory usage.

EDIT: Adding PHPStorm to my list. The language isn't relevant, what's relevant is that JetBrains makes great IDEs and they help in a lot of ways that sublime doesn't out of the box. With that said I still use sublime all the time for quick edits etc.

I would look into a task runner tool such as gulp, otherwise you would likely have to purchase the LiveReload plugin (not sure if you need to purchase it for windows... OSX, yes)

One big thing you could do is concatenate and minify all your javascript files. That would reduce the number of requests and would save some bytes. Using automaters like gulp or grunt can make doing that really easy. Setting up a workflow with either of them can seem daunting at first, but they'll save you a lot of time in the long run.

I use grunt to concat and minify my javascript and CSS (technically SASS in my case). There is also a grunt task for removing unused CSS from your file - https://github.com/addyosmani/grunt-uncss. There are plenty other grunt plugins worth checking out as well. You can also check out gulp but I haven't made the switch just yet.

In terms of what is presented to the user, a static site gen and doing html files "by hand" would be the same output. The SSG will help you as the developer to organize your content and avoid repetition.

I wouldn't worry about loading a different html file per page. If your CSS and JS are on different files (and not inline in each html file) they will get cached after the first page load. And then you can minify your assets, which will entail using a tool like gulp to automate the process.

But if you're not that comfortable with the basics, don't even check gulp and stuff because front-end can get overwhelming when you start going through some rabbit holes and you end up thinking "AAAHH I CAN'T DO ANYTHING UNTIL I LEARN THIS 229 TOOLS"; but if you know the basics of HTML CSS and JS you can do a lot, and then learn the tools after you become tired of repetition and learning the tool will actually feel like it's helping you.

Do you know any programming languages? What's your current knowledge/background?

Gulp you write one script, then with a single command everything is minified and compressed. you can even launch a web server to test it locally. Also Grunt.

Take a look at my gulpfile here, it minifies html, css, and JS. It uses autoprefixer to attach browser prefixes for css rules, keeping my stylesheets clean. Gulp is a gem of a tool, really.

I know it's not strictly an answer, but my current workflow/toolchain is as follows:

• Stable as a base theme
• Sass + Susy (or Neat, depending on what I fancy at the time)
• NodeSASS rather than Compass/Ruby
• A custom Gulp setup to do the following:
  • Build CSS from SASS (gulp sass:compile)
  • Run JS through Babel and minify (gulp js:compile)
  • Run JS linting (run prior to gulp js:compile)
  • Create PNG versions of SVG graphics (I tend to use SVG where possible) for backwards compatibility with IE8 (if I have to)
  • Watch source files for all of the above and then build on demand (like compass watch)

Then when I start work on the theme, I just run gulp, which runs the defaults task which is set up to watch ALL .scss and .js files and then compile and runs LiveReload when changes are detected.

The only downside I've noticed so far, is that the SASS linter that is compatible with NodeSASS is a little new, and fell short of some of my expectations, so I lint the output CSS. To be honest, so long as co-workers keep to spaces rather than tabs and don't use IDs !important for styling, then I'm OK with it.

If this interests you then let me know if there's anything I can add :)

• Learn to use Git well and practice GitHub Flow. Some things that have been handy has been to understand rebasing, advanced git log switches , stashing etc.

• Learn about SASS or another transpile to css language.

• Learn to use a Task Runner like GulpJS. Set up all your repetitive build steps as gulp tasks.

• Learn about unit testing on the front end and backend.

• Learn about continuous integration

Your method is correct, basically you want to watch for changes to your sass file and then compile to css, so yes your method is correct.

However, there are ways to do it that integrate with your overall development environment a bit better. You can use a task runner such as Grunt or Gulp. I've personally use grunt but i've also heard very good things about gulp. I don't think you'll go wrong with either.

The basic premise of a task runner is to automate tasks that you would otherwise do yourself. For example, when you save a file you can tell grunt/gulp to automatically compile your scss into css, minify the file, etc etc....

JavaScript. Specifically Node stuff, as well as the coming ES6 features. Frameworks are less important as they change with the seasons. But know core, functional JavaScript and you'll be good to go.

Doesn't hurt to start using a preprocessor (nothing to really learn as it is essentially just easier-to-write CSS). Really front-end is all about your workflow & optimizing it so that you can get shit done quickly, as there is a lot of tediousness when working with HTML/CSS. Learn Grunt (or better yet Gulp) to speed up your workflow and use tools like Yeoman to set things up for you.

Depending on your workflow and the project this could be a cromulent solution. For example, while your script itself may support a PNG fallback, the method itself is totally JS-reliant, so there is no script-free fallback, so consider progressive enhancement methods to ensure compatibility.

I am personally a big fan of gulp, and my workflow uses gulp-svgstore to keep an always-updated spritesheet that I can reference in the markup using <use>. Unfortunately, SVG symbols are rendered in the shadow DOM, so styling components of icon instances can be difficult. The method you are using recreates each SVG object, so it does not suffer from this particular problem.

Chris Coyier has posted a great deal of SVG knowledge which you may have already encountered or find relevant!

By the way, please provide an un-minified version of your code if you really want people to review it! Luckily this segment is small enough to remain readable.

It depends very much on what you try to achieve.

first: It is totally possible to create the whole page in JS. But I would not go this route. If you want to create static pages then the easiest way to go would be a static site generator with extendable templates.

If it is just some basic pages, i would go for a setup with PUG/JADE and gulp as a preprocessor to compile the pages. In this setup you would just define several pieces of code that you can assemble together then. But getting the setup working is not so easy at first. Btw, you need node.js to do this. So this setup is actually 100% js build ;)

There is a ton of static site generators out there and most of them are quite complicated and overpowered.

https://pugjs.org/

https://pugjs.org/language/inheritance.html

http://gulpjs.com/

2) There is no easy route. But I can help you set something up if you like to.

This isn't really a React question it's more general JavaScript best practices. You should use modules with the help of https://webpack.github.io/ possibly along with http://gulpjs.com/, and compile all your dependencies into a single JS file with one entry point for your page, placing script in the head, my page template will generally be structured something like this:

<!DOCTYPE html> <html> <head> <script async src="/js/frontend.js?20160324021728" onload="initPage()"></script> </head> <body> <p>Hello!</p> </body> </html>

P.S. I also prefer to write in TypeScript which is then compiled down to JS also with the help of the above tools: http://www.typescriptlang.org/

> As far as I am aware, you cant use more than one stylesheet for each html document

You can. You can use as many as you want. If they have conflicting rules (like if you use 6 stylesheets and all 6 give p strong a different colour), whichever comes last wins, so you simply include a base template/framework first and then override it how you wish.

It is recommended practice to write as many stylesheets as you need to keep things tidy and organised, and then concatenate them into one file and minify it. Minify means removing all line breaks, spaces, etc so that the file is as small as it can possibly be. This also happens for your JavaScript files.

This is part of what's called the 'build process', which is handled by a tool like Gulp. You write many small stylesheets, HTML templates, JavaScript files, etc, then run a build command that handles all the concatenation, minifying, etc for you.

CSS has no module system, so this is how you handle it.

One of the things I love about programming is there is often dozens of tools to accomplish the task. For example, you've used Java, /u/Austininto requested Python and I use JavaScript + Grunt (or Gulp) to build automated tasks that accomplish the same thing.

This is true; I'm simply teaching to walk before we run. There are several options for synced folders some of which are automatic (there is even an rsync-auto) and we will certainly get to those.

We will also be using a task runner Gulp in one of the upcoming tutorials that you can use to automatically run the vagrant sync command when files change.

I've run into some issues with the other sync methods so using gulp to run vagrant rsync has worked very well for me. There are plenty of options to choose from though so it's really up to you.

Sorry, I don't use Grunt but try this: https://www.npmjs.com/package/grunt-env

I recommend you look into Gulp as a Grunt replacement. Since Gulp is just Node.js, you can use the default <strong>dotenv</strong> package:

require('dotenv').load()

gulp.task('s3-upload', () => { let credentials = { accessKeyId: process.env.AWS_ACCESS_KEY, secretAccessKey: process.env.AWS_SECRET_KEY } })

process.env.$VARIABLE is how you access environment variables. Place a .env file in the same directory and the dotenv package will pick them up:

# .env file AWS_ACCESS_KEY=12345 AWS_SECRET_KEY=678910

Just got back--mobile is annoying to respond in detail. Thanks again for helping me out!

I use Gulp.js to automate such tasks as: serving from source or dist (BrowserSync automatically refreshes the browser when it detects file changes); running unit/e2e testing; and concatenation, minification, linting JS, compiling Sass...a whole bunch of stuff.

Now that I think about it, for my back end project I'd likely just need a tool that checks the routes work as they should, and probably spit out request/response data, that sort of thing. I recall using something in the past for this but I can't remember the name.

Node.js & npm just assist me with managing dev tools--Gulp plugins, testing frameworks, etc. Bower manages front-end dependencies e.g. AngularJS and other libraries.

What sort of packages/libraries are in common use in PHP? I know of Doctrine, which IIRC is more data-oriented with an ORM, and the Doctrine Common library extends PHP functionalities--is that still used often? And are there any other popular alternatives, general purpose or specific?

Lastly, I can't seem to find any definitive PHP style guides, but from what I gather that's the role PSR serves--or am I wrong here?

Don't feel obligated to answer in too much detail (although feel free to do so if you want to)--I'm about to sleep and I'll be doing a lot more investigating in the morning. It looks like the links you've provided me will answer most of my questions here.

Lastly, do you have any particular experience with PHP development professionally? Because that's an area in which I have absolutely zero experience, and I'm not entirely sure (as of yet) what exactly is expected of me. Testing doesn't seem to be as crucial of a topic as it is in JS, but I could very well be wrong here.

Stick with SASS. It's goals are the same as LESS, but SASS is more popular. Also, there is Gulp, a build system similar to Grunt, but it's code instead of config, based on streams and asynchronicity. It is much faster than Grunt, and fun if you like to code your build routine.

Minification is a step you use to compress your code before deploying it to a production server. While whitespace and descriptive variable names are helpful to you and me, computers don't care and for bandwidth purposes it's better to have a non-human-readable 10kb JS file than a very-human-readable 30kb JS file.

Even the person who wrote it wouldn't have written it that way—they'd write it in a readable form and then use a tool to compress the code. There are tools online like this one but the best way is to incorporate it into your workflow somehow. Tools like grunt and gulp are popular.

I would suggest you use something like Gulp or Grunt (My personal preference is Gulp at the moment but they'll both do the job).

You can write config files that will pre-process your SCSS/SASS files and output you the CSS file you need - plus added bonus you can minify the output automatically and do loads of other stuff using various plugins. Well worth learning.

No problemo.

&nbsp;

You can enhance your workflow even further with gulp and browserify if you're all about modularization like me.

• Browserify
• Gulp

One way to do it would be to use Gulp or Grunt to watch your TypeScript files and compile them to JS when they change, then use something like BrowserSync to inject them into your browser.

Would take a bit of setting up though.

Thanks, I'll take you up on that.

I had a look at the gulp website and honestly, reading it, it makes absolutely no sense, it doesn't tell you what it actually does. The docs don't help either.

Just look at it! http://gulpjs.com/

Why not use a build tool like Gulp to combine the third party Javascript libraries you're using? That way you can both have the file copied to your own public directory and you only need one HTTP request for including those libraries.

Finding what to say what isn't being said ... hmm

• I think there's too much white-space. Especially around the 'What can I do for YOU' area.

• When you hover over those project tiles, those "READ MORE" buttons. I think it needs more padding, especially on top.

• Many of the images are very simple and vector-like. These are perfect for "SVGS". I think you could benefit from this...

• I think proper captilization is important. Which is why you always see jQuery and CSS3 instead of what you have.

• Call to action to socialize. It's very noble you want to meet up. But 50% of the time, they'll probably not have time for that, so it's also better to include another way to contact you like a personal email or whatnot. DO NOT include your number. There are web crawlers who will be ruthless about it and then spread that number around.

• Have you looked into utlizing Gulp and node for better peformance in the front-end area?

Remember, failing is part of being a success. Keep at it. Eventually, those failures will start to get smaller and smaller. You'll still failure. Just not as often. :-)

I nixed livereload about a year ago and switched to BrowserSync http://www.browsersync.io/ I also use gulp http://gulpjs.com/ as my task runner. Though it's not really through sublime it's a pretty straightforward setup. BrowserSync even has a great walkthrough on setup with either gulp or grunt. http://www.browsersync.io/docs/gulp/

You might want to look into just creating a concatted file for deployment using something like Gulp:

Example: https://github.com/SchizoDuckie/DuckieTV/blob/angular/gulpfile.js

Not quite; rails-assets just allows you to drop javascript files into your asset pipeline, while a gem that bridges to gulp / browserify allows you to do more complex asset management such as building up an NPM-style dependency tree, building map files, and more.

It sounds like you're focusing on a lot of things that don't concern you. Companies and people will always be pushing out new libraries, frameworks, organizational tools, etc.. but that doesn't mean you have to use them. Take a peek at it and see if it could possibly help you, but by no means feel obligated to try to understand everything out there.

If you're experienced with a few languages, tools & frameworks that are in demand, why bother with some random new tool when you already have something in your toolbelt that accomplishes the task? No need to force yourself to use it, because in the end it'll just slow you down if you try to use the latest and greatest of everything.

I test out new tools by making small sideprojects, not incorporating them in my daily work-flow. That would be a good way to slow yourself down.

edit

I checked out gulp and I'm not even entirely sure what it does.

>gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.

>By harnessing the power of node's streams you get fast builds that don't write intermediary files to disk.

So it's some kind of plugin for node? Are your node apps running terribly slow? Do you feel like you're struggling to meet deadlines from overcodeing? I have no idea how Gulp works, but it seems like they claim to solve this "problem." Do you have this problem? If not, then pass up on it and read reviews from other developers when they start rolling in. If they praise it, give it a second shot. If not, who cares?

tl;dr - Given the size of the internet & the ease of creating new content, there will always be something new. It's important to stay relatively up to date, but you'll just slow yourself down by trying to learn everything out there. 99% of it won't make a difference to you anyway.

I'd take a look at https://github.com/gruntjs/grunt-contrib-compress. I haven't used it before so I'm not sure if it is what you're looking for though.

If you aren't familiar with Grunt take a look at that as well, it's really awesome. There's also Gulp which is becoming mainstream nowaday - but I recommend Grunt if you havn't used a build tool before as it is easier to learn and create own build configs with, imo.

The fastest way (I know of) to scaffold projects is to use make with C++. But I don't program in C. IMO the most customizable, extensible, fast scaffolding/build system is gulpjs (or slush, the scaffolding specific version of gulp). Grunt / yeoman are good choices too, but after using gulp, and reading the stream handbook, I had some epiphancies regarding all this. Nodejs is definitely the best choice when it comes to scaffolding/building/organizing client-side JS/html/css - which is too often underlooked by front-end devs (especially when starting). There's no reason that node/gulp can't be used to scaffold backend projects in any language, you can always bind node to C libs that already exist or call the command line / filesystem. IMO this shit is the future (NOW), even if nodejs never becomes a mainstream 'backend server', it will dominate the build/scaffolding market (for programmers who don't have time to use C++ for everything).

Setup an Action in Photoshop to drop the images to your desired width and to be saved for web, then run it as a batch automation on all the files at once. Make sure to include a Close event in the photoshop action so you don't end up with 40k open files.

If you don't want/need to decrease image widths and just compress them you could go with a task runner like gulp.js or Grunt. Edit: Heck, maybe you can set those up to decrease image widths as well, I have no idea, but I don't usually trust other tools but Photoshop to do shrinking etc properly.

I went from Hammer to Grunt, basically for a bit more control over what I was doing, and not having to have yet another app open all the time (plus, Hammer was getting slow compiling some of my larger projects).

That being said, I'm not taking a seriously look at GulpJS instead of Grunt, based on how much easier it is to configure and use, though it does have fewer plugins.

However, the new version of CodeKit is enough to make me want to swap yet again. It's just gorgeous.

If you can avoid it, don't use any at all!

<em>autoprefixer</em> is one (great!) solution if you have (or can add) grunt (or gulp) in your workflow.

The key thing to understand is that watch only acts as a server for live reload. Connect is what you want to use to actually serve your files. connect additionally adds the live reload script to connect to the live reload server run by grunt watch, as stated here

This is why I've lost my taste for Grunt recently. Everything is so incredibly esoteric and so many little things are going on that it's borders on impossible to really know what's happening. That said, it's still probably the best tool for the job if you're just getting started (with modern front-end tools, not necessarily JavaScript). The ecosystem is magnitudes better than anything else out there.

I still do like grunt as a task runner, but for things like serving and building assets, I've got my eye towards gulp and broccoli.

And that concludes my rant of the day. Glad I could help.

I had a similar situation going on before I swapped over -- I was using Hammer.app for handling SASS and compression on relevant projects, or LiveReload to trigger LESS compilation, but they didn't offer me the level of control I wanted (which CodeKit may), and my colleagues didn't have them or want to pay the license price. Not to mention that I'm the front-end dev for a team of backenders that deal mainly with .NET projects in C# and ASP. Enter Grunt. Now I just include my gruntfile in my repositories, and they can have my entire test environment reproduced with nothing but

npm install; grunt test

> Although, I would love to be able to commit code and have it deploy automatically, not sure grunt is for that though.

It would be fairly trivial to set up a grunt task with existing plugins that committed and then deployed your code either via git, ftp, sftp, webdav, whatever you use.

Have you taken a look at GulpJS? It might be an alternative for your case.

It sounds like he's had one bad experience with sass and decided that the benefits don't outweigh the learning curve....which is absolutely wrong.

> Yes, Grunt is a pain to set-up INITIALLY. SASS is not very hard with tools like Codekit (and really, you should be on OS X if you're doing front-end dev :).

Grunt is a real pain to configure, which is why I'm moving to Gulp on my next project. I'd argue that you should be on Linux if you're doing front-end dev. :P