4 ms·

I recently switched to using gulp and webpack (to build react.js) after having used grunt for many years and I would encourage anyone still using grunt to make

I recently switched to using gulp and webpack (to build react.js) after having used grunt for many years and I would encourage anyone still using grunt to make the switch. All that pain and suffering to get your grunt build to work will not be a problem. Setting up gulp is painless. It just worked. My setup is less, jshint, wepback with react.js and bootstrap. I encourage people to use webpack for any kind of js building unless you're using browserfy, but you can use browserfy with straight up gulp. You could also replace browserfy with webpack. Webpack will build your require.js (and your commonjs) without need for almond.js if you're making single builds. Setting up require.js with grunt was a nightmare, and a cinch with gulp + webpack. Like it took me an entire day in the past with grunt, and like 5 minutes with gulp and webpack.

Sean-Der 12y ago
I have been using Browserify for about 8 months on all my personal and work projects and have really liked it. Since it seems like you have used both what are your thoughts on Webpack and Browserify? I have never used Webpack (and now very little about it), but was wondering if it is worth investigating it?
- AdrianRossouw 12y ago
  webpack uber alles. start here : https://github.com/petehunt/webpack-howto https://github.com/petehunt/webpack-howto
  - thealphanerd 12y ago
    Fancy seeing you in a webpack thread :P
- bellerocky 12y ago
  Webpack is really easy to use and works very nicely with commonjs/nodejs style `module.exports` and `require` which is how I use it now. The place where it becomes incompatible is with the syntax that webpack adds to require statements. Stuff like `require("css!./file.css");` So you could use webpack to build things you once built with browserify, but if you start using `css!` you can't go back easily. I prefer webpack just because how easy it is to use and how fast it is. It comes with its own watcher too, but I use gulp watch since I use gulp for building less, not the webpack less loader. I haven't wrapped my head around using `require` statements for less just yet.
- lumpypua 12y ago
  +1 on the request for experiences of people who've played with Webpack and Browserify. Sooo many options, so little time.
lbotos 12y ago
I think this is a perfect example of why in 2014 Javascript is harder than ever for someone to learn. I'd love to get your take as someone who seems to be using the latest cool stuff as to how to mitigate that? I personally learned JS circa 2006 in the jQuery era and now I'm in a position where web-minded individuals ask me how to learn JS but they are "10 steps ahead" asking questions like react vs ember, ember vs angular, etc. Thoughts? Do they basically have to learn up the chain? I guess what I'm saying is there is a lot of history that I'm not sure can be skipped?
- bellerocky 12y ago
  You can skip. I get that front end stuff can be intimidating. My recommendation is to learn the basics and when it comes to libraries fight the intimidation and take a few minutes to try out new technology when you encounter it. If you find it too hard in those few minutes of actually trying it, don't use it. You can still use script tags if you want. Your site will run just fine. Do what feels comfortable. These tools are supposed to make your life easier, not harder. Having said that grunt is very bad because it is intimidating even for seasoned front-end programmers, it probably scared a lot of new developers away from even looking at front-end build systems. That's probably a good reason why it should fall off the radar. Thankfully gulp is much easier and I bet if you try it you will find it useful. If you don't, that's OK.
  - mattdawson 12y ago
    I practically live and die by the 5 Minute Rule, and as a counterpoint, I've always found Grunt intuitive, if verbose. In particular, I love that its files API is so flexible. I frequently find myself asking questions that look like "I wonder if I can do this X way", and things just work. Saying Grunt is "very bad" is harsh and only serves to amplify hyperbole that causes much of the churn around JS tooling. [edited for a grammar nitpick]
    - bellerocky 12y ago
      > Saying Grunt is "very bad" is harsh and only serves to amplify hyperbole that causes much of the churn around JS tooling. I'm speaking from personal experience and time lost trying to just get things to work so I can focus on building the application, not making a hobby out of building the frontend tooling. What I said may be harsh, but it's the truth. Have you tried gulp?
floatboth 12y ago
You've been using grunt wrong. It's a task runner, not an asset builder. I use Grunt to run Broccoli and tests. Broccoli is the best asset tool right now. Trees are so much better than streams or anything else. I even made some Sweet.js macros for making Broccoli files look super neat: https://github.com/myfreeweb/sweetbuild https://github.com/myfreeweb/sweetbuild
tieTYT 12y ago
I use grunt.js and from my perspective gulp is nice syntactic sugar that solves the same problem. But, it's difficult for me to tell what webpack is for. Granted, I've only skimmed the documentation[1], but I feel like I haven't run into the problems that it's trying to solve. Is this meant for webapps that are hundreds of thousands of lines of code? [1]: http://webpack.github.io/docs/what-is-webpack.html http://webpack.github.io/docs/what-is-webpack.html

Sean-Der 12y ago

I have been using Browserify for about 8 months on all my personal and work projects and have really liked it. Since it seems like you have used both what are your thoughts on Webpack and Browserify? I have never used Webpack (and now very little about it), but was wondering if it is worth investigating it?

AdrianRossouw 12y ago
webpack uber alles. start here : https://github.com/petehunt/webpack-howto https://github.com/petehunt/webpack-howto
- thealphanerd 12y ago
  Fancy seeing you in a webpack thread :P
bellerocky 12y ago
Webpack is really easy to use and works very nicely with commonjs/nodejs style `module.exports` and `require` which is how I use it now. The place where it becomes incompatible is with the syntax that webpack adds to require statements. Stuff like `require("css!./file.css");` So you could use webpack to build things you once built with browserify, but if you start using `css!` you can't go back easily. I prefer webpack just because how easy it is to use and how fast it is. It comes with its own watcher too, but I use gulp watch since I use gulp for building less, not the webpack less loader. I haven't wrapped my head around using `require` statements for less just yet.
lumpypua 12y ago
+1 on the request for experiences of people who've played with Webpack and Browserify. Sooo many options, so little time.

lbotos 12y ago

I think this is a perfect example of why in 2014 Javascript is harder than ever for someone to learn. I'd love to get your take as someone who seems to be using the latest cool stuff as to how to mitigate that? I personally learned JS circa 2006 in the jQuery era and now I'm in a position where web-minded individuals ask me how to learn JS but they are "10 steps ahead" asking questions like react vs ember, ember vs angular, etc. Thoughts? Do they basically have to learn up the chain? I guess what I'm saying is there is a lot of history that I'm not sure can be skipped?

bellerocky 12y ago
You can skip. I get that front end stuff can be intimidating. My recommendation is to learn the basics and when it comes to libraries fight the intimidation and take a few minutes to try out new technology when you encounter it. If you find it too hard in those few minutes of actually trying it, don't use it. You can still use script tags if you want. Your site will run just fine. Do what feels comfortable. These tools are supposed to make your life easier, not harder. Having said that grunt is very bad because it is intimidating even for seasoned front-end programmers, it probably scared a lot of new developers away from even looking at front-end build systems. That's probably a good reason why it should fall off the radar. Thankfully gulp is much easier and I bet if you try it you will find it useful. If you don't, that's OK.
- mattdawson 12y ago
  I practically live and die by the 5 Minute Rule, and as a counterpoint, I've always found Grunt intuitive, if verbose. In particular, I love that its files API is so flexible. I frequently find myself asking questions that look like "I wonder if I can do this X way", and things just work. Saying Grunt is "very bad" is harsh and only serves to amplify hyperbole that causes much of the churn around JS tooling. [edited for a grammar nitpick]
  - bellerocky 12y ago
    > Saying Grunt is "very bad" is harsh and only serves to amplify hyperbole that causes much of the churn around JS tooling. I'm speaking from personal experience and time lost trying to just get things to work so I can focus on building the application, not making a hobby out of building the frontend tooling. What I said may be harsh, but it's the truth. Have you tried gulp?

floatboth 12y ago

You've been using grunt wrong. It's a task runner, not an asset builder. I use Grunt to run Broccoli and tests. Broccoli is the best asset tool right now. Trees are so much better than streams or anything else. I even made some Sweet.js macros for making Broccoli files look super neat: https://github.com/myfreeweb/sweetbuild https://github.com/myfreeweb/sweetbuild

tieTYT 12y ago

I use grunt.js and from my perspective gulp is nice syntactic sugar that solves the same problem. But, it's difficult for me to tell what webpack is for. Granted, I've only skimmed the documentation[1], but I feel like I haven't run into the problems that it's trying to solve. Is this meant for webapps that are hundreds of thousands of lines of code? [1]: http://webpack.github.io/docs/what-is-webpack.html http://webpack.github.io/docs/what-is-webpack.html