I am trying to define a custom function in the useminPrepare configuration, but no matter what I do, the function is eventually omitted in the build.
I have updated Node(0.10.36) and NPM(2.4.1) to the latest versions.
The config file:
useminPrepare: {
src: options.dist.dir + '/index.html',
options: {
dest: options.dist.dir + '/',
staging: options.temp.dir,
flow: {
steps: {
js: ['concat', 'uglifyjs']
},
post: {
js: [
{
name: 'concat',
createConfig: function(a,b) {
console.log(a,b);
}
},
'uglifyjs'
]
}
}
}
}
Grunt build verbose (notice createConfig is gone):
Running "useminPrepare:useminPrepare" (useminPrepare) task
Verifying property useminPrepare.useminPrepare exists in config...OK
Files: dist/index.html
Options: dest="dist/", staging=".tmp", flow={"steps":{"js":["concat","uglifyjs"]},"post":{"js":[{"name":"concat"},"uglifyjs"]}}
Going through dist/index.html to update the config
Looking for build script HTML comment blocks
Anyone have any idea?
It also omits if I specify my own parameter with a function as value (it wont get omitted if I specify a string):
name: 'concat',
test: function() {
console.log("Hello world");
},
createConfig: function() {
console.log(a,b);
}
I figured out what I did wrong, I should have specified the options outside my subtask, like so:
useminPreprare: {
options: {
dest: options.dist.dir + '/',
staging: options.temp.dir,
flow: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['concat', 'cssmin']
},
post: {
js: [
{
name: 'concat',
createConfig: function(a,b) {
console.log(a,b);
}
},
'uglifyjs'
]
}
}
},
build: {
src: options.dist.dir + '/index.html',
}
}
Now I can execute useminPrepare with the task useminPrepare:build
Related
I configured a Grunt project and I am trying to run livereload.
But I cant get it to work, I included the livereload script tag in my HTML document.
Script tag inside HTML doc (body)
<script src="http://0.0.0.0:35729/livereload.js"></script>
Grunt file
module.exports = function(grunt) {
//project configurations
grunt.initConfig({
clean: {
build: {
src: ['dist']
}
},
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'dist/css/compiled.css':'sources/scss/main.scss'
}
}
},
uglify : {
options : {
banner : "/*! app.min.js file */\n",
style: "compressed"
},
build : {
src : ["sources/js/app.js"],
dest : "dist/js/app.min.js"
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass'],
options: {
livereload: 35729
}
}
},
connect: {
server: {
options: {
port: 8000,
hostname: '*',
base: {
path: '.',
options: {
index: 'index.html'
}
},
onCreateServer: function(server, connect, options) {
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask("default", ["clean", "connect","sass", "uglify", "watch"]);
};
I am not sure whats going on, I see that the changes to the SCSS files are being picked-up and after a hard refresh it the changes are visible, but not due to livereload.
Edit: Now it works, I added the script tag inside the head, while I was reading that it needed to be before closing the body tag.
I have setup grunt task to concatenate the CSS files into a combined.css file and it successfully concatenates the CSS files.
grunt.initConfig({
concat: {
options: {
separator: '\n\n\n',
base: "../../../",
},
css: {
src: [ '../../my/demo/v1.0/1.css',
'../../my/demo/v1.0/2css',
'../../my/demo/v1.0/3.css',
],
dest: '../../my/demo/v1.0/combined123.css',
},
});
grunt.loadNpmTasks('grunt-concat-css');
grunt.registerTask('default', ['concat']);
However, I am not able to figure out how should I replace 1.css, 2.css and 3.css in the index.html with the combined123.css file using Grunt.
When manually trying to replacing these css files with the css files in index.html, running the grunt command reverts back the changes made to index.html. When I do the View Source Code for the page in browser, it shows the multiple css files instead of the latest concatenated combined123.css file.
How can I replace these css files with the combined123.css file in the tag of index.html, using the Grunt task.
This is the Gruntfile.js
grunt.initConfig({
root: root,
//concat:css task implemented here as mentioned in above code snippet
connect: {
server: {
options: {
port: grunt.option('port') || 9090,
keepalive: false,
base: "../../../"
}
}
},
open: {
all: {
path: 'http://localhost:<%= connect.server.options.port%>/my/demo/v1.0/dest/index.html'
}
},
watch: {
html: {
files: ['views/*.html', 'index_temp.html'],
tasks: ['mergeFiles']
},
livereload: {
files: ['dest/index.html'],
options: { livereload: true }
}
},
htmlbuild: {
dist: {
src: 'index_temp.html',
dest: '.tmp/',
options: {
beautify: true,
relative: true,
sections: {
headers: 'views/abc.html',
input: 'views/def.html',
}
}
}
},
replace: {
example: {
src: ['.tmp/index_temp.html'],
dest: 'dest/index.html',
replacements: [ {
from: /^\s*\n/gm,
to: ''
},
{
from: /\s+$/,
to: ''
}],
}
});
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-concat-css');
grunt.registerTask('server', ['mergeFiles', 'open' ,'connect', 'watch' ]);
grunt.registerTask('default', ['mergeFiles', 'open' ,'connect', 'watch', 'concat']);
grunt.registerTask('mergeFiles', ["htmlbuild:dist", "replace:example"]);
Any help would be much appreciated.
I am experimenting with Grunt and I am getting a Warning: Task "default" not found error when I try to run Grunt. my Gruntfile.js is
module.exports = function(grunt) {
grunt.initConfig({
concat: {
js: {
options: {
separator: ';'
},
src: [
'library/js/*.js'
],
dest: 'library/js/scripts.min.js'
},
},
uglify: {
options: {
mangle: false
},
js: {
files: {
'library/js/scripts.min.js': ['library/js/scripts.min.js']
}
}
},
less: {
style: {
files: {
"library/css/style.css": "library/less/style.less"
},
}
},
watch: {
js: {
files: ['library/js/*.js'],
tasks: ['concat:js', 'uglify:js'],
options: {
livereload: 35729
}
},
css: {
files: ['library/less/*.less'],
tasks: ['less:style'],
options {
livereload: 35729
}
},
php : {
files : ['**/*.php'],
options : {
livereload : 35729
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
This was working until I added the Livereload portions, and I think it might be a syntax error. However this is the first time I have used this and I simply don't know what is causing the problem. Any help would be greatly appreciated.
You're missing a colon for watch.css.options. Update to:
css: {
files: ['library/less/*.less'],
tasks: ['less:style'],
options: {
livereload: 35729
}
}
In case anyone finds this later to get livereload to work I had to change the watch section to
watch: {
js: {
files: ['library/js/*.js'],
tasks: ['concat:js', 'uglify:js'],
},
css: {
files: ['library/less/*.less'],
tasks: ['less:style'],
},
php : {
files: ['**/*.php'],
},
options: {
livereload: true,
spawn: false
}
}
I am trying to set up a workflow using grunt, to help with development of my jekyll site.
Found this great TUT which basically goes through how to install it in your workflow.
However, I get these errors when I run the 'grunt' command.
**[BS] Warning: Multiple External IP addresses found**
**[BS] If you have problems, you may need to manually set the 'host' option**
**[BS] Server running. Use this URL: http://192.168.1.5:3005**
[BS] Serving files from: /Users/antonioortiz/Sites/newaortiz/_site
**[BS] Not watching any files...**
[BS] Browser Connected! (Chrome, version: 33.0.1750.146)
Obviously the ones I bolded are most glaring, as NO css is being generated in my 'assets/css
Below is my Gruntfile. Thank you in advance.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-browser-sync');
// All configuration goes here
grunt.initConfig({
jekyll: {
build: {
dest: '_site'
}
},
sass: {
dist: {
files: {
'assets/css/*.css': 'assets/sass/*.scss'
}
}
},
compass: {
dev: {
options: {
config: 'config.rb'
} //options
} // dist
}, //compass
watch: {
sass: {
files: 'assets/**/*.scss',
tasks: ['sass']
},
jekyll: {
files: ['_layouts/*.html', '_includes/*.md', 'assets/css/*.css'],
tasks: ['jekyll']
}
},
compass: {
files: ['assets/sass/*.scss'],
tasks: ['compass:dev']
}, // sass
browser_sync: {
files: {
src: ['_site/assets/css/*.css']
},
options: {
watchTask: true,
ghostMode: {
clicks: true,
scroll: true,
links: true,
forms: true
},
server: {
baseDir: '_site'
}
}
}
});
// Custom tasks
grunt.registerTask('build', ['sass', 'jekyll']);
grunt.registerTask('default', ['build', 'browser_sync', 'watch']);
};
I am not sure why Grunt isn't generating my HTML?
Is there a mistake with my gruntfile?
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-haml');
grunt.initConfig({
uglify: {
my_target: {
files: {
'js/script.js': ['javascripts/*.js']
} //files
} //my_target
}, //uglify
sass: {
dist: {
options: {
sourcemap: true,
compass: true
}, //options
files:{
'stylesheets/style.css': 'sass/style.scss'
} //files
} //dist
}, //sass
haml: { // Task
dist: { // Target
files: { // Dictionary of files
'index.html': 'index.haml' // 'destination': 'source'
}
}
},
watch: {
options: { livereload: true },
scripts: {
files: ['javascripts/*.js'],
tasks: ['uglify']
}, //script
css: {
files: ['sass/*.scss'],
tasks: ['sass']
}, //sass
html: {
files: ['*.haml'],
task: ['haml']
}
} //watch
}) //initConfig
grunt.registerTask('default', ['haml', 'watch']);
} //exports
Old question, but I had the same issue, and here's what it was for anyone's future reference.
The gruntfile that I downloaded (like this one) had 'task' instead of 'tasks'. So the watch task is running, and you'll get notified that a file has changed, but no actual tasks will be run. Correct the typo and you're back in action!
Figure this out.
There is no problem with the code itself.
It is the terminal screwing up.