#The directory Structure
– Gruntfile.js
– app
|– index.php
|– js
|– css
|– templates
|– template.html
– dist
Last active
March 13, 2016 14:51
-
-
Save wolfgangschoeffel/5335836 to your computer and use it in GitHub Desktop.
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).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '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' | |
| ]); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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
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?