Skip to content

Instantly share code, notes, and snippets.

@wolfgangschoeffel

wolfgangschoeffel/Gruntfile.js

Last active March 13, 2016 14:51
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wolfgangschoeffel/5335836 to your computer and use it in GitHub Desktop.
Save wolfgangschoeffel/5335836 to your computer and use it in GitHub Desktop.
Download ZIP
How to use grunt-usemin and grunt-rev when the html file (template) is in a subdirectory but the references should be relative to the root (index.php in the root directory that uses the template).
Raw
directorystructure.md

#The directory Structure

– Gruntfile.js
– app
    |– index.php
    |– js
    |– css
    |– templates
        |– template.html
– dist
Raw
Gruntfile.js
'use strict';
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to match all subfolders:
// 'test/spec/**/*.js'
module.exports = function (grunt) {
// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
grunt.initConfig({
yeoman: yeomanConfig,
clean: {
dist: ['<%= yeoman.dist %>/*']
},
// not used since Uglify task does concat,
// but still available if needed
/*concat: {
dist: {}
},*/
/*
uglify: {
dist: {}
},*/
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/scripts/*.js',
'<%= yeoman.dist %>/styles/*.css',
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}',
'<%= yeoman.dist %>/styles/fonts/*'
]
}
}
},
useminPrepare: {
html: '<%= yeoman.app %>/templates/template.php',
options: {
dest: '<%= yeoman.dist %>'
}
},
usemin: {
html: ['<%= yeoman.dist %>/templates/{,*/}*.php'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
basedir: '<%= yeoman.dist %>',
dirs: ['<%= yeoman.dist %>/**/*']
}
},
cssmin: {
dist: {
files: {
'<%= yeoman.dist %>/styles/main.css': [
'.tmp/styles/{,*/}*.css',
'<%= yeoman.app %>/styles/{,*/}*.css'
]
}
}
},
htmlmin: {
dist: {
options: {
/*removeCommentsFromCDATA: true,
// https://github.com/yeoman/grunt-usemin/issues/44
//collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeOptionalTags: true*/
},
files: [{
expand: true,
cwd: '<%= yeoman.app %>/templates',
src: '*.php',
dest: '<%= yeoman.dist %>/templates'
}]
}
},
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,txt}',
'.htaccess'
]
}]
}
},
});
grunt.renameTask('regarde', 'watch');
grunt.registerTask('build', [
'clean:dist',
'useminPrepare',
'htmlmin',
'concat',
'cssmin',
'uglify',
'copy',
'rev',
'usemin'
]);
grunt.registerTask('default', [
'build'
]);
};
Raw
template.html
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World!</title>
<link rel="stylesheet" href="styles/main.css">
<!-- build:js(app) scripts/vendor/modernizr.js -->
<script src="components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<h1>Hello World!</h1>
<!-- build:js(app) scripts/main.js -->
<script src="components/jquery/jquery.js"></script>
<script src="scripts/script1.js"></script>
<!-- endbuild -->
<!-- build:js(app) scripts/plugins.js -->
<script src="components/script2.js"></script>
<script src="components/script3.js"></script>
<!-- endbuild -->
</body>
</html>
@farneman
Copy link

This and the related usemin issue helped me solve a similar problem. Thanks.

@robwierzbowski
Copy link

Same here. Thanks for posting.

@stieler-it
Copy link

I can't figure how this would work for images, i.e. if a template in a subfolder references a <img src="img/logo.png"/>. How to tell usemin that templates are effectively loaded from the root path?

@ivanhoinacki
Copy link

is possible to create another file, and declare variables that it can then be used in gruntfile.js file. mapping your project and creating folders and subfolders.

declare in gruntfile.js

  pkg: grunt.file.readJSON('package.json'),
    properties: grunt.file.readJSON('properties.json'),

new file properties.json

{
  "fonts"         : "bower_components/bootstrap/dist/fonts",
  "php"           : "app/",
  "css"           : "app/css",
  "view"          : "app/php/view/",
  "controller"    : "app/php/controller/",
  "service"       : "app/php/service/",
  "model"         : "app/php/model/",
  "util"          : "app/php/util/",
  "src"   : "app",
  "dist"  : "dist"
}

/\* put files not handled in other tasks here _/
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= properties .src %>',
          dest: '<%= properties .dist %>',
          src: ['_.txt', '.htaccess']
        }, {
          /\* fonts bootstrap _/
          expand: true,
          dot: true,
          cwd: '<%= properties .fonts %>',
          dest: '<%= properties .dist %>/fonts',
          src: ['_.ttf', '*.woff']
        } .....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment