This is a pretty general question - but as a newcomer to taskrunners I'm a little confused about the workflow. I understand that you can create a task that does things like uglify and minify but what about debugging while you write the code? Specifically, if I need to view my js source to identify issues, what would be my workflow? Do I create a different task that doesn't effect my javascript files for developing, then run the task that does everything when I know things are working properly?
It's hard to answer in context of the parts of your workflow you hint at but don't mention, but for uglification/minification one good solution would be sourcemaps, or more specifically, since you're asking about gulp: gulp-sourcemaps.
From their docs:
gulp.task('javascript', function() {
gulp.src('src/**/*.js')
.pipe(sourcemaps.init())
.pipe(plugin1())
.pipe(plugin2())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
Those plugins (plugin1, etc) would be things like uglify, but do need to be sourcemaps-compatible.
All this allows your browser to find its way back from concatenated, minified code, all the way to the correct source files.
As a footnote, the alternative you already mention can also work okay: compose your build tasks in a way that you can serve source (or at least: unminified) files in development, and provide minified code in staging and production.
As with all such (somewhat) broad questions: it depends.
Related
What's the best way of including a node module on my webpage?
Should I use absolute paths like <script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> or is there an easier and better way of doing it?
Thank you.
Add this in your app.js-file
app.use('/placeholder', express.static(__dirname + '/node_modules/'));
This allows you to write:
<script src="/placeholder/bootstrap/dist/js/bootstrap.min.js"></script>
And Node will redirect that path to the node_modules folder.
You can change placeholder to whatever you want, mine is named scripts
Node modules are designed for server-side execution in the NodeJS environment, not for use in a browser. So the best way to include them in a web page is not to.
I will note that Bootstrap is a client-side framework, so it makes no sense as a NodeJS module in the first place.
If you're looking for an npm-like tool for client-side packages, the flavor of the week is Bower.
My answer to this question would be a bit different and a little advance.
Maybe it won't be helpful to you right now, but definitely, in future, it will. Also, it would help out others.
Yes, the first answer is absolutely correct, you can add a placeholder and then add links relative to it in your index file.
Now, are you using a task runner like gulp or grunt? If not I would recommend you to start using it, because you can cut out a lot of manual work use these tools and eventually save a heck load of time.
You might be thinking why am I talking about gulp or grunt over here. I will answer this questing shortly.
Since you are using node.js, you already know how modules are loaded in Node.
eg : require('express');
What if we could use this approach for our client applications? You would only have to include one js file in your html and that js file would require all the other js libraries for you.
Great, suddenly you can reduce the number of script tags in your html page from approx around 20-30 to 1.
This is where module loaders come into picture.
But browsers do not understand the require statement.
To deal with this we use a tool called a browserify, we can use gulp(which I talked about earlier) to configure a task to browserify our files.
When you use this, you will have to require all your js libraries and your own js files into a single file (say: app.js). But as we said browsers do not understand require. This is where browserify will take this app.js file pre process it and spit out a single file that should be included into your html.
You can follow this article to get a clear picture on how to achieve this.
Scalable app using Gulp and browserify.
Pretty neat right! :)
Some of the other module loaders are System.js and webpack
I'm new to AngularJS and Grunt. I have two grunt tasks setup in GruntFile.js for dev and production. For production I'm uglifying & combine many js files into one.
I need some guidance/tips on how to debug uglified javascript code in production if any problem arises. I tried googling asking my co-workers but no help hence my question here on stack-overflow.
Is there a way to un-unglify scripts in production on the fly to debug or
some configuration that toggles to use uncompressed files for debugging and compress files after the job is done.
You guys gave me some amazing approaches. Thanks
If there are some more ways kindly please do share.
Don't debug minified code without source maps. You'll go crazy if you don't. Also, can't you rebuild the code instead of trying to fix minified code?
I use Chrome, but I'm sure FF has a similar tool:
That little brackets button at the bottom of the script panel prettifies on the fly. Works whether the code is sloppy or full-on minified.
It's a good solution for quick-n-dirty, but you will run into problems if you rely on it. Source Maps are recommended. See #Kosch's answer for a decent write-up. funny, we posted identical links
Browserify great and all, and makes it really sweet (even compared to require.js), but the idea of bundling everything into one minified file although sounds great for final version of the app, feels like something I would like to avoid during development. Wouldn't it make difficult to debug stuff?
Is it possible to use browserify and still keep all javascript files and make it more transparent for the browser during development? And when you ready to ship it run browserify bundler and minify everything into one file?
Or maybe there's better approach - like keeping all scripts listed in a partial that gets included to the main page for development or something like that?
Upd: I just found that there's an option:
--debug -d Enable source maps that allow you to debug your files separately.
Is that helpful? I guess it is. But I suppose it still makes it difficult if want to use coffeescript source maps
Indeed you shouldn't use minified/concatenated Javascript in development. Luckly there are a myriad of ways of solving this particular issue, I recommend taking a look into an automated build process like Grunt.
I have ten js files used in different pages of my website but never all together.
Is it possible to compile all js files into a single file?
I wish to avoid that the client browser has to load several js files.
How would I achieve this and what is the best practice in terms of loading performance?
You could try using an AMD module loader such as requirejs. It has the capability to concat and uglify all your scripts into one file so it downloads everything in a single request.
If you do not want to use AMD modules, you could just concat and minimize your files manually. Minimizing is mainly done to compress your code and to obfuscate the source, even though there are tools to reverse the minimized code. Have a look at Google's closure compiler and UglifyJS.
Another thing you could to is to make your web server gzip it's responses for application/javascript MIME type.
Really worth looking at Grunt, and specifically grunt concat task
This is just one way Grunt is helpful, very much worth your time to get your head around!
There are also plugins for Require, which is very helpful.
I am using jquery fileupload plugin and it has 7-8 js files which it loads.
Now others developers are also working on site and sometime it cause confusion and difficult to find which js file is used where.
So i am thinking if i can combine 7 files in one file so that i can know that thats my file
Try this to compile your javascript file or code.
http://closure-compiler.appspot.com
While possibly overkill in this particular case, it might be worth checking out grunt. It will let you keep your files divided into multiple files for when you are working on them, and as soon as any file change compiling, minifying and combining them into a single/groups of files as desired, while also allowing you to define the load order of your code.
It requires some setup the first time you run it (which you can later use as a template) but greatly improves the process of combining/minifying files, and also has support for processing coffescript and sass among others, as well as writing unit tests for your code.
I use Rake to compile Javascript (and SASS to CSS, as well). It minifies the files in a unique JS. It's written in Ruby, but it's easy to configure and it works very fine.
But if more developers are working on the same code, another good idea I strongly suggest is to to use a SVN (sub-version control system), as TortoiseSVN or Git. This will allow many developers to work on the same source files, without losing any change.