Search code examples
javascriptgruntjsgrunt-usemingrunt-contrib-concat

Prevent grunt from duplicating files with the same name

I have a Gruntfile.js which compiles jade templates, scss files, coffeescript etc and then uses useminPrepare to generate the config for concat, uglify etc an rewrite the source using ` blocks.

This all works but I'm using multiple .jade files to .html meaning that useminPrepare looks at each file and tries to run concat etc on them all. While I understand why this needs to be done (in case different usemin block contain different files and are rewritten to different names) but is there a way to say "if the file has the same name, don't add it to the config".

Removing the blocks from all but one file doesn't work as the urls still need to be rewritten.

Basically, can I avoid this (which is time consuming).

enter image description here

Here is my gruntfile.

'use strict';

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) {

  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // Turn on the stack trace by default
  grunt.option('stack', true);

  // Define the configuration for all the tasks
  grunt.initConfig({

    // Read the package file
    pkg: grunt.file.readJSON('package.json'),

    // Project settings
    config: {
      // Configurable paths
      app: 'app',
      dist: 'dist'
    },

    // Watches files for changes and runs tasks based on the changed files
    watch: {
      jade: {
        files: ['<%= config.app %>/{,*/}*.jade'],
        tasks: ['jade:server']
      },
      coffee: {
        files: ['<%= config.app %>/scripts/{,*/}*.{coffee,litcoffee,coffee.md}'],
        tasks: ['newer:coffee', 'jshint:server']
      },
      js: {
        files: ['<%= config.app %>/scripts/{,*/}*.js'],
        tasks: ['newer:copy:server', 'jshint:server']
      },
      jshint: {
        files: ['.jshintrc'],
        tasks: ['jshint:server']
      },
      gruntfile: {
        files: ['Gruntfile.js'],
        tasks: ['jshint:gruntfile']
      },
      sass: {
        files: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
        tasks: ['sass', 'autoprefixer']
      },
      styles: {
        files: ['<%= config.app %>/styles/{,*/}*.css'],
        tasks: ['newer:copy:server', 'autoprefixer']
      },
      livereload: {
        options: {
          livereload: '<%= connect.livereload.options.livereload %>'
        },
        files: [
          '.tmp/{,*/}*.html',
          '.tmp/styles/{,*/}*.css',
          '.tmp/scripts/{,*/}*.js',
          '<%= config.app %>/images/{,*/}*'
        ]
      }
    },

    // The actual grunt server settings
    connect: {
      livereload: {
        options: {
          port: 9000,
          livereload: 35729,
          hostname: '0.0.0.0',
          open: true,
          base: [
            '.tmp',
            '<%= config.app %>'
          ]
        }
      },
      dist: {
        options: {
          open: 'http://msif.local',
          livereload: false
        }
      }
    },

    // Empties folders to start fresh
    clean: {
      dist: {
        files: [{
          dot: true,
          src: [
            '.tmp',
            '<%= config.dist %>/*',
            '!<%= config.dist %>/.git*'
          ]
        }]
      },
      server: '.tmp'
    },

    // Compile Jade to HTML
    jade: {
      options: {
        pretty: true,
        data: function() {
          // Return an object of data to pass to templates
          return grunt.file.readJSON('data.json');
        },
      },
      server: {
        files: [{
          expand: true,
          cwd: '<%= config.app %>',
          dest: '.tmp/',
          src: 'layouts/*.jade',
          ext: '.html',
          flatten: true
        }]
      },
      dist: {
        files: [{
          expand: true,
          cwd: '<%= config.app %>',
          dest: '<%= config.dist %>/',
          src: 'layouts/*.jade',
          ext: '.html',
          flatten: true
        }]
      },
    },

    // Make sure code styles are up to par and there are no obvious mistakes
    jshint: {
      options: {
        jshintrc: '.jshintrc',
        reporter: require('jshint-stylish')
      },
      gruntfile: {
        options: {
          jshintrc: '.jshintrc'
        },
        src: 'Gruntfile.js'
      },
      server: {
        src: [
          '.tmp/scripts/{,*/}*.js',
        ]
      },
      dist: {
        options: {
          force: true // Usually false
        },
        src: [
          '<%= jshint.server.src %>'
        ]
      }
    },

    // Compiles CoffeeScript to JavaScript
    coffee: {
      options: {
        bare: true
      },
      server: {
        files: [{
          expand: true,
          cwd: '<%= config.app %>/scripts',
          src: '{,*/}*.{coffee,litcoffee,coffee.md}',
          dest: '.tmp/scripts',
          ext: '.js'
        }]
      },
      dist: {
        files: [{
          expand: true,
          cwd: '<%= config.app %>/scripts',
          src: '{,*/}*.{coffee,litcoffee,coffee.md}',
          dest: '<%= config.dist %>/scripts',
          ext: '.js'
        }]
      },
    },

    // Compiles Sass to CSS and generates necessary files if requested
    sass: {
      options: {
        style: 'expanded'
      },
      all: {
        src: '<%= config.app %>/styles/main.scss',
        dest: '.tmp/styles/main.css'
      }
    },

    // Add vendor prefixed styles
    autoprefixer: {
      options: {
        browsers: ['last 2 versions']
      },
      dist: {
        files: [{
          expand: true,
          cwd: '.tmp/styles/',
          src: '{,*/}*.css',
          dest: '.tmp/styles/',
          ext: '.css'
        }]
      }
    },

    validation: {
      options: {
        relaxerror: [ //ignores these errors
          'Bad value X-UA-Compatible for attribute http-equiv on element meta.',
          'Attribute autocomplete not allowed on element textarea at this point.',
          'Attribute autocapitalize not allowed on element input at this point.'
        ],
        reset: true,
        reportpath: false
      },
      files: {
        src: [
          '<%= config.dist %>/*.html'
        ]
      }
    },


    // Reads HTML for usemin blocks to enable smart builds that automatically
    // concat, minify and revision files. Creates configurations in memory so
    // additional tasks can operate on them
    useminPrepare: {
      options: {
        dest: '<%= config.dist %>',
        staging: '.tmp'
      },
      html: ['<%= config.dist %>/{,*/}*.html']
    },

    concat: {
      options: {
        sourceMap: true
      }
    },

    // Performs rewrites based on useminPrepare configuration
    usemin: {
      options: {
        assetsDirs: [
          '<%= config.dist %>',
          '<%= config.dist %>/images'
        ]
      },
      html: ['<%= config.dist %>/{,*/}*.html'],
      css: ['<%= config.dist %>/styles/{,*/}*.css']
    },

    // The following *-min tasks produce minified files in the dist folder
    imagemin: {
      dist: {
        files: [{
          expand: true,
          cwd: '<%= config.app %>/images',
          src: '{,*/}*.{gif,jpeg,jpg,png}',
          dest: '<%= config.dist %>/images'
        }]
      }
    },

    // Copies remaining files to places other tasks can use
    copy: {
      dist: {
        files: [
          {
            expand: true,
            dot: true,
            cwd: '<%= config.app %>',
            dest: '<%= config.dist %>',
            src: [
              '*.{ico,png,txt,svg}',
              '.htaccess',
              '*.php',
              '*.html',
              'images/{,*/}*.{webp,svg}',
              'fonts/{,*/}*.*'
            ]
          },{
            expand: true,
            cwd: '<%= config.app %>/bower_components/fontawesome/fonts/',
            dest: '<%= config.dist %>/fonts/',
            src: '*.*',
            flatten: true
          },{
            expand: true,
            cwd: '<%= config.app %>/bower_components/bootstrap-sass-official/assets/fonts/bootstrap/',
            dest: '<%= config.dist %>/fonts/',
            src: '*.*',
            flatten: true
          },
          {
            src: '<%= config.app %>/bower_components/jquery/dist/jquery.min.js',
            dest: '<%= config.dist %>/scripts/jquery.min.js'
          },
          {
            src: '<%= config.app %>/bower_components/jquery/dist/jquery.min.map',
            dest: '<%= config.dist %>/scripts/jquery.min.map'
          }
        ]
      },
      server: {
        files: [
          {
            expand: true,
            dot: true,
            cwd: '<%= config.app %>/styles',
            dest: '.tmp/styles/',
            src: '{,*/}*.css'
          },{
            // Copy any javascript files to the temo directory
            expand: true,
            dot: true,
            cwd: '<%= config.app %>/scripts/vendor',
            dest: '.tmp/scripts/',
            src: '{,*/}*.js'
          },{
            expand: true,
            cwd: '<%= config.app %>/bower_components/fontawesome/fonts/',
            dest: '.tmp/fonts/',
            src: '*.*',
            flatten: true
          },{
            expand: true,
            cwd: '<%= config.app %>/bower_components/bootstrap-sass-official/assets/fonts/bootstrap/',
            dest: '.tmp/fonts/',
            src: '*.*',
            flatten: true
          }
        ]
      },
    },

    // Generates a custom Modernizr build that includes only the tests you
    // reference in your app
    modernizr: {
      devFile: '<%= config.app %>/bower_components/modernizr/modernizr.js',
      outputFile: '<%= config.dist %>/scripts/modernizr.js',
      files: [
        '<%= config.dist %>/scripts/{,*/}*.js',
        '<%= config.dist %>/styles/{,*/}*.css',
        '!<%= config.dist %>/scripts/vendor/*'
      ],
      uglify: true,
      extra: {
        shiv: false,
        load: false
      }
    },

    bump: {
      options: {
        files: ['package.json', 'bower.json'],
        push: true,
        pushTo: 'origin',
        createTag: true,
        tagName: 'v%VERSION%',
        tagMessage: 'Version %VERSION%',
        commitFiles: ['<%= bump.options.files %>', 'CHANGELOG.md'],
        commitMessage: 'Bumped version to v%VERSION%'
      }
    },

    changelog: {
      options: {
        editor: 'atom -w'
      }
    },

    // Run some tasks in parallel to speed up build process
    concurrent: {
      options: {
        logConcurrentOutput: true
      },
      server: [
        'sass',
        'newer:coffee:server',
        'newer:jade:server',
        'newer:copy:server'
      ],
      dist: [
        'coffee:dist',
        'sass',
        'jade:dist',
        'imagemin'
      ]
    }

  });

  // Build all the things
  grunt.registerTask('default', [
    'clean:server',
    'concurrent:server',
    'autoprefixer',
  ]);

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

    grunt.task.run([
      'default',
      'connect:livereload',
      'watch'
    ]);

  });

  grunt.registerTask('server', function (target) {
    grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
    grunt.task.run([target ? ('serve:' + target) : 'serve']);
  });

  grunt.registerTask('test', [
    'newer:jade:dist',
    'newer:coffee:server',
    'jshint:server',
    'validation'
  ]);

  grunt.registerTask('build', [
    'clean:dist',
    'concurrent:dist',
    'useminPrepare',
    'jshint:dist',
    'autoprefixer',
    'concat',
    'cssmin',
    'uglify',
    'copy:dist',
    'modernizr',
    'usemin',
    'connect:dist'
  ]);

};
Solution

  • It turns out that updating all of the npm packages to the latest version has done the trick.