Grunt file output static assets point to specified URL - javascript

In my index file, I have something like this:
<!-- build:js({.tmp,app}) scripts/main.js -->
<script src="scripts/foo.js"></script>
<script src="scripts/bar.js"></script>
<!-- endbuild -->
Which then outputs to my dist like this:
<script src="scripts/cce9cd3a.main.js"></script>
What I'm trying to do is modify the way the dist is rendered so it says something like:
<script src="https://s3.amazonaws.com/etc/etc/static/scripts/cce9cd3a.main.js"></script>
The idea is I want it to output to the dist folder in the same way, which I will move over to s3. What is a clean way to prepend all of my static assets to the same static serve url using grunt?

Based upon the discussion we had in comments, you have two general options after grunt-usemin does it's work.
1) Find-and-replace from the shell.
If you are using a *nix system with grep and similar tools, you can put the file someplace easy to grep and replace. For example, you could change your build blocks to something like:
<!-- build:js({.tmp,app}) awsreplacepath/main.js -->
<script src="scripts/foo.js"></script>
<script src="scripts/bar.js"></script>
<!-- endbuild -->
so you get something like:
<script src="awsreplacepath/cce9cd3a.main.js"></script>
Then use a grep-and-replace shell script, like the one discussed in these questions to replace the awsreplacepath with the path to want referenced.
How to grep and replace
How to find and replace all occurrences of a string recursively in a directory tree?
2) Find-and-replace before grunt finishes.
There are a few find-and-replace plugins for grunt, but grunt-string-replace seems to have the most usage according to npmjs.org.
This isn't really much different than the first option.
In both cases, the regex should be simple as you can pick a string that is essentially certain to be unique...so you won't need to do much more than drop something like 'awsreplacepath' into the regex.
...and just remember that the main.js file usemin generated and that you need to move will still be in the awsreplacepath directory. All we're doing is changing the HTML to prevent you from having to edit the file yourself.

Related

Include scripts files recursively and wrap them with HTML Script tags

I have lots of files in sub folders and I have to include them in an html file , i.e -
<script src="folder2/file1.js"></script>
for each file .
I'm looking for an easy way to run all the folders from a provided root folder and cause it to include to my index.html all the files .
i.e -
for the folder with -
folder1>
file1.js
file2.js
folder2>
file1.js
it will be in the index.html -
<script src="folder1/file1.js"></script>
<script src="folder1/file2.js"></script>
<script src="folder2/file1.js"></script>
I don't want to concat them so please avoid from grunt concat suggestions .
Have you any smart idea ?
I'd use grunt-include-source
That way, you avoid to use concat and get the expected result.
I'm not very familiar with it so I'd refer you to this SO answer

How to load everything from one folder?

Let's say I have folder scripts with 10 javascript files and instead of doing this:
<script src="scripts/js1.js"></script>
<script src="scripts/js2.js"></script>
<script src="scripts/js3.js"></script>
<script src="scripts/js4.js"></script>
<script src="scripts/js5.js"></script>
//and so on...
I want to do this:
<script src="scripts/*"></script>
which load ALL files in scripts
How would I go about doing this?
Won't be as easy as that, here is what you are looking for:
How can I include all JavaScript files in a directory via JavaScript file?
What you try to achieve is cumbersome from the client side. You can achieve the same through server-side scripting before you load your html file. You can use a task runner tool like grunt, gulp etc. (or write a script) that will traverse your target directory, retrieve all the *.js file paths and append their script tags in your html file.
Another solution is to use a tool to concatenate all your js files in one bundle file and only load that file from your html file. There are plenty of tools out there to do that

In AngularJS how do I substitute minified javascript files with non-minified files in my development environment?

What is the best way to handle this in AngularJS?
I have an AngularJS app that includes concatenated/minified javascript files, however in my development environment I want to load the non-concatented/non-minified versions of the file. I want this because it is easier to debug the code with non-minified files.
<!-- production -->
<script src="js/all.min.js"></script> <!-- contains all concatenated/minified code -->
<!-- dev -->
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
I am not sure how to do this since in AngularJS I couldn't find a conditional mechanism that is suitable. I had thought about using a directive on the each script tag?
I am using Gulp to concat and uglify the files, but I couldn't find a method to accomplish this with Gulp.
PHP is the server-side language.
Any help will be greatly appreciated.
You could create a "Source Map" to go along with the minified javascript file. The source map can then be used when debugging so you can see the original code. If you are using for example UglifyJS 2.0 or Closure Compiler there is an option of creating a source map when you create the minified javascript.
Fore more information about source maps and debugging: source maps debugging in Google Chrome
The best way to to do this in Angular might be to use ngInclude to conditionally load an ngTemplate. It would look like this:
<script type="text/ng-template" id="development">
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
script src="js/directives.js"></script>
</script>
<script type="text/ng-template" id="production">
<script src="js/all.min.js"></script>
</script>
<div id="javascripts" ng-include="dev ? 'development' : 'production'"></div>
If you are using $scope in your controller then just set $scope.dev to true to include development JavaScript, or false to use the production file.
Edit: But as others have said you should look into a task runner for this instead. Also, look at environment variables for setting what state the project is in.
Edit 2: As for using Gulp for this you can use the gulp-html-replace package. A task using this package would look like this:
var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');
gulp.task('replace-js', function(){
if (process.env.NODE_ENV === 'production') {
gulp.src('index.html')
.pipe(htmlreplace({
'js': ['js/services.js', 'js/controllers.js', 'js/directives.js']
}))
}
});
for this html:
<!-- build:js -->
<script src="js/all.min.js"></script>
<!-- endbuild -->
(Edit 3: I noticed you might not use node, the stuff below is node specific so you will have to adjust to your needs)
When you run gulp you will have to set the environment variable, that process.env.NODE_ENV you see in the if statement. Do this by running Gulp like this:
set NODE_ENV=production && gulp replace-js
This is OS specific so google "set environment variable node YOUR_OS" if it doesn't work.
In your package.json add that script to the scripts key, or add the scripts key if it doesn't exist so it might look like this:
"scripts": {
"replace-js": "set NODE_ENV=production && gulp replace-js"
}
Then you can just use this command instead of typing all of that out:
npm run replace-js
I'm just going from memory, and have never used gulp-html-replace so hopefully I didn't make any errors and cause you confusion.

Grunt to minify and reference .min files

I need to:
Copy index.html to index.uncompressed.html
Change some the references in index.html from .js to .min.js (i.e. my_jsfile.js to my_jsfile.min.js)
3) Minify index.html
I am using Grunt.
Number 3 is no problem.
I assume number 1 will be easy.
For number 2, I was planning on using some sort of Grunt editing plugin and changing all .js file references between <!-- Start Here --> and <!-- End here --> from my_jsfile.js to my_jsfile.min.js.
Is this the way this type of thing is done?
The resource I use in this situation is grunt-processhtml, which will do exactly what you're looking for. Check out one of my repos, steady-backbone-boilerplate, where I use this to do exactly what you're describing.
In particular, I find this is a helpful example:
<!-- build:[src] js/source.min.js -->
<script data-main="js/main" src="js/vendor/require.js"></script>
<!-- /build -->
So, in development we're using the requirejs script to load all our dependencies. In our production index.html file, we're loading the source js file, which has been minified with the grunt-requirejs module.

Handling concat in prod with non-concat in dev

I'm currently working on a large angular.js project. I use grunt to concat/uglify all of my files into one large target.js file, which I then include on my index page.
I've come to the realization that this makes it quite difficult to debug in the dev environment since the code is then all on one line and super ugly. I thought about setting up a second grunt task that leaves the files pretty and separate (see this answer: Alternate grunt.js tasks for dev/prod environments) but then I have the problem of having to include all of the files on the index page when in dev, but removing those references and referencing just the ugly concat target in production.
I'm hoping to find a solution that allows me to keep pretty code in dev and ugly concat code in prod using grunt. I considered just adding script tags on the fly when in dev, and then somehow removing them when I use the production task, but this seems like a headache that might not be necessary, as well as I don't know how I would determine what script tags need to be removed/replaced.
I'm not 100% sold on this approach, as I'm just beginning the project and want to get this right the first time, so if you have a suggestion that better handles this situation, I would be open to accepting that answer as well.
A solution is to use the grunt-usemin and grunt-contrib-concat . That way you can define a block of ressources (css / js) that will be concatenated only when you execute the usemin task.
For example :
index.html :
<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->
Gruntfile.js :
// simple build task
grunt.registerTask('build', [
'useminPrepare',
'concat:generated',
'usemin'
]);
That way, files will be concatenated only at build time, leave your index.html will all the single references untouched in DEV mode
For more details / example, see : https://github.com/yeoman/grunt-usemin

Categories

Resources