Discussion: CoffeeScript workflow about generator-webapp_deprecated HOT 25 CLOSED

I was actually going to post a very similar issue regarding Sass workflow.
I believe the issue I have is exactly the same as your CoffeeScript workflow.

Using Sass with the server is fine because the server looks in .tmp/ if it doesn't find the files in app/.
But using those Sass files in usemin blocks doesn't work cause it doesn't look for the compiled files in .tmp/ but rather in app/.

Another issue i find is the order between cssmin and concat tasks.
I feel like concat should happen before cssmin.

That way, if a usemin block is found, useminPrepare updates the config with your block.
At the moment, if I swap the order, this fails anyway cause it reads my relative path styles/test.css app/styles/test.css but it doesn't exist cause it was compiled with sass (from test.scss).

So if this is fixed by enabling the build to fetch from .tmp as a fallback then concat would do its job and then we should call cssmin on the result.

Maybe those 2 issues need to be split.
Let me know if you need more explanation about my case and what I'm trying to do.

from generator-webapp_deprecated.

Actually, this need to be studied and I'm not sure about. With yeoman 1.0, the "staging" dir that was tmp has been removed (some tasks still uses a .tmp dire but that not the case for example of usemin).

The server task is used to render file while in development mode (i.e. hence it looks at app and .tmp when this is really needed (for example for coffee as we do not want to "pollute" app with generated files), whereas the dist directory is used to holds all the generated, compactd, uglified, ... files.

Now, I understand the issue related to usemin and coffee script ... I'm going to have a look at it.

from generator-webapp_deprecated.

@passy I like the proposal. Let's see what @sleeper says after he has had a closer look at the problem ;)

from generator-webapp_deprecated.

+1. I really loved the way we could mix js and coffee files in 0.9 when using require-js

from generator-webapp_deprecated.

OK, so let me sum-up.

Imagine you have in you app/scripts directory, foo.coffee and bar.coffee.
What is needed is a way to :

1. include each of the generated js (i.e. bar.js and foo.js) in the index.html file
2. to serve them in server tasks
3. to correctly concat and uglify them in the default grunt task (i.e. build).

All this is almost already do-able (i.e. 1 and 2 are mostly done if you use the above coffee config in Gruntfile.js).
The only missing part is, in 3, the capability to say to useminPrepare: "Man, it's perfect to have a look at app subdirs but I'd also like you to look under this directory(this in our case being.tmp`).

We need this option is be activated only for a given block (e.g. for some block it should output uglify config starting with app although for these selected block they will start with .tmp, or whatever is configured).

I would propose to have a block like this:

<!-- build:js(.tmp) scripts/coffee -->
        <script src="scripts/test.js"></script>
        <script src="scripts/bar.js"></script>
<!-- endbuid -->

What di you think of this ?

from generator-webapp_deprecated.

@sleeper That looks like a good solution to me. 👍

from generator-webapp_deprecated.

Ok, so as soon as I'll merge yeoman/grunt-usemin#64, and with the following changes to the Gruntfile.js template:

1. Specify a server and a new dist target for coffee tak option:

        coffee: {
            server: {
                files: [{
                    expand: true,
                    cwd: '<%= yeoman.app %>/scripts',
                    src: '*.coffee',
                    dest: '.tmp/scripts',
                    ext: '.js'
                }]
            },
            dist: {
                files: {
                    '.tmp/scripts/coffee.js': '<%= yeoman.app %>/scripts/*.coffee'
                }
            },

1. Change the server task, to launch coffee:server instead of coffee:dist:

If you have files foo.coffee and bar.coffee in app/scripts, you can add:

        <!-- build:js(.tmp) scripts/coffee.js -->
        <script src="scripts/foo.js"></script>
        <script src="scripts/bar.js"></script>
        <!-- endbuild -->

to you index.html.

This will:

1. When running a grunt build, compile .tmp/scripts/foo.js and .tmp/scripts/bar.js and concatenate them into a dist/scripts/coffee.js which is then uglified
2. When running a grunt server, the coffee files will be compiled, and foo.js and bar.js put in .tmp/scripts. When the page is opened these files will be correctly loaded by the browser.

from generator-webapp_deprecated.

Version 0.1.8 of grunt-usemin is including these changes.

from generator-webapp_deprecated.

Thank you, @sleeper! I will try to get something into generator to use the new syntax with appendScript/appendFiles.

from generator-webapp_deprecated.

Hmm.. sorry for the off topic but why aren't we defaulting to /scripts/*/.coffee

AFAIK we are now ignoring sub directories for all the tasks.. on complex apps you need directory structure..

from generator-webapp_deprecated.

@nnarhinen I don't think that's off topic at all. That's a good point.

from generator-webapp_deprecated.

@sleeper your instructions missed a couple config steps in the Gruntfile.

1. modify the grunt server task

        grunt.registerTask('server', function (target) {
             // (...)
             grunt.task.run([
                // (...)
                'coffee:server',  // CHANGED FROM 'coffee:dist' to 'coffee:server'
            ]);
        });

2. modify the watch configuration

             coffee: {
                 files: ['<%= yeoman.app %>/scripts/*.coffee'],
                 tasks: ['coffee']  // CHANGED FROM 'coffee:dist' to 'coffee'
             },

from generator-webapp_deprecated.

Hi,

I had mentioned first one ;)

Change the server task, to launch coffee:server instead of coffee:dist:

You're right for the 2nd one, I didn't test watch ;)

from generator-webapp_deprecated.

re: coffee:server task - that will re-compile all CoffeeScript files upon change of only one file, right?

This isn't optimal if you have a large collection of CoffeeScript files...it takes some time to re-compile every CoffeeScript file when all you want is to compile the modified one.

I fixed this for myself through the creation of a new task, however I don't think this is the best solution. See what I did here: https://gist.github.com/hswolff/4973329#file-gruntfile-sampe-js-L35 .

from generator-webapp_deprecated.

I stil have a problem with usemin / requirejs with this.... Maybe because im replacing main.js with a main.coffee?

 Error: Missing either a "name", "include" or "modules" option

from generator-webapp_deprecated.

Guys, this is far from the DRYest of solutions but I've gotten this to play nice with requireJS (assuming you figured out the 1.8.1 bug) by the following:

            server: {
                files: [{
                    expand: true,
                    cwd: '<%= yeoman.app %>/scripts',
                    src: '*.coffee',
                    dest: '.tmp/scripts',
                    ext: '.js'
                }]
            },
            dist: {
                files: [{
                    // rather than compiling multiple files here you should
                    // require them into your main .coffee file
                    expand: true,
                    cwd: '<%= yeoman.app %>/scripts',
                    src: '*.coffee',
                    dest: '<%= yeoman.app %>/scripts/',
                    rename: function (destBase, destPath) {
                        return destBase + destPath.replace(/\.coffee$/, '.js');
                    }
                }]
            },

Probably want to change your server task to

 coffee:dist

Hope this helps someone.

from generator-webapp_deprecated.

Shouldv'e RTFM eh?

was getting

 Error: Missing either a "name", "include" or "modules" option

Because my jade-generated index.html removed the

<!--build:js scripts/main.js-->

from generator-webapp_deprecated.

What if I need to include some component scripts, too? How would I do that?

This obviously does not work as the components are not in the temp folder:

<!-- build:js(.tmp) js/custom.js -->
<script src="components/jquery.cookie/jquery.cookie.js"></script>
<script src="components/jquery-ui/ui/jquery.ui.position.js"></script>
<script src="components/underscore/underscore.js"></script>
<script src="components/underscore.string/lib/underscore.string.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/popup.js"></script>
<!-- endbuild -->

from generator-webapp_deprecated.

Any news on that? I was basically stuck because we are NOT using AMD style (so no require.js) and with the backbone generator having subfolders to scripts/ is inevitable

I wonder if someone can set this to the DEFAULT

dist: {
    files: [{
        // rather than compiling multiple files here you should
        // require them into your main .coffee file
        expand: true,
        cwd: '<%= yeoman.app %>/scripts',
        src: [
            '**/*.coffee' // THIS WILL ENABLE THE COMPILATION OF ALL FILES IN scripts/ AND 1-level subfolders, ADD MORE LINES TO THIS ARRAY IF YOU NEED MORE DEPTH
        ],
        dest: '.tmp/scripts',
        ext: '.js'
    }]
},

TL;DR;
please substitute src: '*.coffee' with src: '**/*.coffee' in the dist task atleast! ;)

from generator-webapp_deprecated.

Hi,
I checked the code on https://github.com/yeoman/grunt-usemin/blob/master/lib/htmlprocessor.js#L94, and added a href attribute which pointed to tmp file to build the single js, and it worked:

<!--build:js scripts/scripts.js-->
<script src="components/jquery/jquery.js"></script>
<script href="../.tmp/scripts/app.js" src="scripts/app.js"></script>
<!--endbuild-->

But the href attribute is reserved for requirejs, so I think it maybe can be like this way:

<!--build:js scripts/scripts.js-->
<script src="components/jquery/jquery.js"></script>
<script usemin-build-dir="../.tmp/" src="scripts/app.js"></script>
<!--endbuild-->

from generator-webapp_deprecated.

For now you can use a copy task to stage your files for concatenation. Before usemin runs, copy css, js, and bower components to tmp, compile your coffee and css preprocessors, then run concat.

I know there's an issue that mentions building a server like cascade <!--build:js(app,.tmp) scripts/scripts.js--> in one of the other generators, which is the ideal solution. If I come across it again I'll link it here.

from generator-webapp_deprecated.

Here's the issue: yeoman/yeoman#959. It's a little old, so not sure if anything's been changed or if this is still being implemented (I hope so!).

from generator-webapp_deprecated.

@aligo suggested a very clever workaround. If you use bracket expansion in the alternate search directory inside a usemin block (e.g., build:js({app,.tmp})), concat will expand the paths and add files from both directories. As long as you avoid naming collisions you can have a build process that works very similar to grunt server. I've been testing it in generator-jekyllrb and it's working perfectly.

from generator-webapp_deprecated.

I think the original issue has been addressed. If there is still something that could improve the workflow, it would be best to open a new ticket for this.

from generator-webapp_deprecated.

This should probably be documented somewhere on the Yeoman website. I got quite frustrated trying to figure out what all this is about, and how I'm expected to include a coffeescript file in a page. It seems kind of magical and unintuitive that they get compiled into the hidden .tmp folder but the contents of this folder are still served alongside other contents of the app folder, so you can just magically refer to your coffeescript files as javascript files and it works. I wish someone had told me that earlier. I thought I would have to run a watchdog compiler myself to get it to place .js files under the app folder (not .tmp) or I would have to use the coffeescript preprocessor in require.js, or use <script type="text/coffeescript"> tags.

from generator-webapp_deprecated.