Yeoman migration to 1.0 and grunt with coffeescript

With migrating to yeoman 1.0 from version 0.9.6 you have to essentially create a new project and import your source over as the builds have changed so much.  Check the documentation from yeoman on how to do the upgrade.

https://github.com/yeoman/yeoman/wiki/Migrate-from-0.9.6-to-1.0

I have an Angularjs project with coffeescript that I wanted to have compile to individual js files. There are lots of good examples on how grunt works with coffeescript from the source https://github.com/roytruelove/angular-grunt-coffeescript

Purpose of compiling coffeescript this way.

This will create 1 js file per coffee file and have them sit next to the original source coffeescript file.  This is not what you want to release to production as there are a lot of network requests per page.

This is for development purposes as single files are easier to read as they are a lot shorter so you can see the generated js and fix problems.

You could create a grunt task to bundle the source into a single file for production, I have not included this in this blog post.

I am new to grunt so I was just trying to get things up and running to see how the structure had changed in the new yeoman generated Gruntfile.js for Angularjs from Google.

Compile the source and the tests

Old way previous to 1.0

    coffee: {
      compile: {
        files: {
          'app/scripts/controllers/*.js': 'app/scripts/controllers/*.coffee',
          'app/scripts/services/*.js': 'app/scripts/services/*.coffee',
          'app/scripts/directives/*.js': 'app/scripts/directives/*.coffee',
          'app/scripts/mocks/*.js': 'app/scripts/mocks/*.coffee',
        }
      }
    },

NEW way for 1.0

Create a coffee task where you create any amount of grunt tasks that you can execute.  You can then refer to them below in one or more of the grunt.registerTasks below which is where you include the coffee:compile and coffee:compileTest to ensure they are run.

I used flatten: false so the files are created next to the coffeescript files.  This allows me to see the generated js file next to the coffeescript so it is easier to trace down errors.

    coffee: {
      compile: {
        expand: true,
        flatten: false,
        cwd: '<%= yeoman.app %>/scripts',
        src: ['**/*.coffee'],
        dest: 'app/scripts',
        ext: '.js'
      },
      compileTest: {
        expand: true,
        flatten: false,
        cwd: 'test',
        src: ['**/*.coffee'],
        dest: 'test',
        ext: '.js'
      },
    },

Copy over your watch task

Copy your old watch command changing the tasks needed to be your newly created tasks to include them in the watch so it will recompile when any of the coffeescript files change. This will fire off the coffee:compile and coffee:compileTest tasks when the watch is triggered.

watch: {
      coffee: {
        files: ['<%= yeoman.app %>/scripts/**/*.coffee',
          'test/specs/controllers/*.coffee',
          'test/specs/services/*.coffee'
          ],
        tasks: ['coffee:compile', 'coffee:compileTest']
      },
.....

Register coffeescript tasks into the existing Grunt build cycles

Grunt serve taks changes

You can see I have included my coffee:compile and coffee:compileTest tasks I have created above into the  grunt command so they will be executed when you do the following

grunt serve


  grunt.registerTask('serve', function (target) {
    if (target === 'dist') {
      return grunt.task.run(['build', 'connect:dist:keepalive']);
    }

    grunt.task.run([
      'clean:server',
      'coffee:compile',
      'coffee:compileTest',
      'bower-install',
      'concurrent:server',
      'autoprefixer',
      'connect:livereload',
      'watch'
    ]);
  });

Grunt test and build task changes

For good measure I have included the coffee:compile into the build task and coffee:compileTest into the test task


grunt.registerTask('test', [
    'clean:server',
    'coffee:compileTest',
    'concurrent:test',
    'autoprefixer',
    'connect:test',
    'karma'
  ]);

  grunt.registerTask('build', [
    'clean:dist',
    'coffee:compile',
    'bower-install',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngmin',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'rev',
    'usemin',
    'htmlmin'
  ]);

Grunt Clean taks changes

To ensure that you do not have old js files hanging around when you refactor filenames I also remove all the generated js files here I remove the js files from the controllers folder via ‘<%= yeoman.app %>/scripts/controllers/*.js’,

clean: {
      dist: {
        files: [{
          dot: true,
          src: [
            '.tmp',
            '<%= yeoman.dist %>/*',
            '!<%= yeoman.dist %>/.git*',
            '<%= yeoman.app %>/scripts/controllers/*.js',
.......
          ]
        }]
      },
      server: '.tmp'
    },
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s