I'm new to web development and I'm trying to build a small webapp. I used yoeman to set everything up and it did pretty well, angular installed perfectly and I installed angular-animate and jquery-ui after with bower. Autoreloading the webpage happend automagically, I really liked it.
After a while it stoped livereloading my changes. I don't know why. I'm not sure what I did.
This is what my gruntfile watch section looks like:
// Watches files for changes and runs tasks based on the changed files
watch: {
js: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
tasks: ['newer:jshint:all'],
options: {
livereload: true
}
},
jsTest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['newer:jshint:test', 'karma']
},
styles: {
files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', 'autoprefixer']
},
gruntfile: {
files: ['Gruntfile.js']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= yeoman.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
}
It looks ok right? No errors showing up when running:
grunt serve
I had the same problem where LiveReload would stop working after a while.
What worked for me was reinstalling the LiveReload Chrome Extension, so if you didn't make any changes to the Gruntfile you can try that.
Related
I have more than 100 images in my images/ folder.
Here is my imagemin - Grunt Config
// 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,ico}',
dest: '<%= config.dist %>/images'
}]
}
}
When I run grunt build I saw this
Running "imagemin:dist" (imagemin) task
Minified 7 images (saved 492.79 kB)
Only 7 of my images got minified. Not all.
I've tried changing the * around in a diff combination, but so far - no luck.
src: '{,*/*/}*.{gif,jpeg,jpg,png,ico}'
How do I fix my src to minified everything in my images folder ?
I think the problem might be in the src globbing pattern. The pattern you are using only matches those images that are in the cwd root or in a two levels deep ones ({,*/*/}).
If you want all the images in the cwd directory to be minified regardless the levels of subdirectories they reside, you should use the **/* globbing pattern instead:
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/images',
src: '**/*.{gif,jpeg,jpg,png,ico}',
dest: '<%= config.dist %>/images'
}]
}
}
When trying to compile my grunt file and build into my dist folder for deployment I get the following error in the console:
Running "rev:dist" (rev) task
dist/public/app/app.js >> 63decaf3.app.js
dist/public/app/vendor.js >> a09756ab.vendor.js
dist/public/app/app.css >> d2017fc8.app.css
Warning: Unable to read "dist/public/bower_components/animate.css" file (Error code: EISDIR).
The reason for this is that I have a bower component I've got installed named animate.css. This library is of course installed in my bower_components folder, but the matching string I have in my Grunt file only looks for files with an extension of .js, .css, et cetera. Here's my matching string:
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/public/{,*/}*.js',
'<%= yeoman.dist %>/public/{,*/}*.css', // Offending line
'<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/public/assets/fonts/*'
]
}
}
}
And here's the directory structure:
bower_components
-> ...
-> angular-ui-router
-> animate.css // Folder with the error
---> animate.css // File that it should be recognizing
---> animate.min.css // File that it should be recognizing
-> es5-shim
-> ...
In this case, how would I tell Grunt that this is a directory which contains files rather than a file itself?
I have slightly different approach.
bower install animate-css --save
it will grab animate.css but save at:
bower_components/animate-css
Using this method you don't have to play with Gruntfile.js which I personally consider unpleasant to edit and even look at ;)
Exclude the animate.css folder, then include everything inside it. I am not sure about the exact glob options see here, for details. Something like this:
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/public/{,*/}*.js',
'<%= yeoman.dist %>/public/{,*/}*.css',
'!<%= yeoman.dist %>/public/bower_components/animate.css',
'<%= yeoman.dist %>/public/bower_components/animate.css/animate.css',
'<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/public/assets/fonts/*'
]
}
}
}
You should be able to use a custom filter function with the fs.Stats method. Also, there is the ext option ( Indicates where the period demarcating the extension is located. )
ext: String
src: [
'<%= yeoman.dist %>/public/{,*/}*.js',
'<%= yeoman.dist %>/public/{,*/}*.css', // Offending line
'<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/public/assets/fonts/*'
],
filter: 'isDirectory',
You may need to use isFile depending on if you only want to match actual files instead.
Example of isFile usage, worked a charm for me.
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
'<%= yeoman.dist %>/**/*.js',
'!<%= yeoman.dist %>/local.js',
'!<%= yeoman.dist %>/web.js',
'<%= yeoman.dist %>/styles/**/*.css',
'<%= yeoman.dist %>/images/**/*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/styles/fonts/*'
],
filter: 'isFile'
}
},
Very similar to this question.
I've installed the node lib and have it in my package.json:
"devDependencies": {
...
"grunt-contrib-sass": "~0.6.0"
}
and have a block in my Gruntfile.js:
grunt.initConfig({
...
sass: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/styles/scss',
src: ['scss/{,*/}*.scss'],
dest: '<%= yeoman.app %>/styles/css',
ext: '.css'
}]
}
}
My file structure looks like so:
app
styles
css
scss
And I have the sass gem installed.
I'm sure I'm missing something very basic here that needs to be included. My yo serve doesn't seem to be putting the files in the right place to be caught up and used.
I imagine theres something I'm missing in the watch block, but I'm not sure what that is.
so my Gruntfile.js needed to look like this:
sass: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/styles/scss',
src: ['*.scss'],
dest: '.tmp/styles/',
ext: '.css'
}]
}
}
and I needed to add sass to the styles task in the watch block.
I've just scaffolded an Angular app using Yeoman. I've noticed that the build task does several things by default, including minifying and concatenating js files.
I'd like to have a simpler build task that didn't do any minifying or concatenation, and, instead, only did the following two things:
compile my .scss into .css
copy a working app into my distribution directory
Can anyone help me write a grunt task that will do (only) these two things?
Many thanks.
Ok, I've edited the default grunt file so that it does what I want.
My solution involved writing tasks called copy:devDist and compass:devDist, and then combining them into a devDist task.
//
// copy:devDist --> copies everything into the dist folder, except styles/
//
copy: {
[...]
devDist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'**','!styles/**' // everything but styles/
]
}]
}
},
//
// compass:devDist --> compile the sass; put result in dist/styles/
//
compass: {
[...]
devDist: {
options: {
cssDir: '<%= yeoman.dist %>/styles'
}
}
},
//
// register a 'devDist' task that calls the two tasks above
//
grunt.registerTask('devDist', [
'clean:dist',
'copy:devDist',
'compass:devDist'
]);
Now running grunt devDist compiles my css and puts a fully functional app into my dist folder. Excellent. :)
I'm trying to concatenate all javascript files inside my controllers directory into one file, located one level higher. This is the code I'm using:
concat: {
dist: {
files: {
'<%= yeoman.app %>/scripts/all.js': [
'<%= yeoman.app %>/scripts/controllers/{,*/}*.js',
'<%= yeoman.app %>/scripts/controllers/{,*/}*.js'
]
}
}
}
It works fine, but I'm forced to manually type grunt concat in console every time I change my javascript files. So I'm trying to get this done with a watcher but can't get it to work. This is my watcher code:
concat: {
files: ['<%= yeoman.dist %>/scripts/controllers/*.js'],
tasks: ['concat']
},
You will need to type "grunt watch" when you want to have watch monitor the files. You'll need to add the watch task in your "Gruntfile.js" like so:
watch: {
concat: {
files: ['<%= yeoman.dist %>/**/*.js'],
tasks: "concat"
}
}
Your concat task still needs to be there as you currently have.
Make sure you install grunt-contrib-watch as well..
npm install grunt-contrib-watch --save-dev
Check out the github page for grunt-contrib-watch for more info on these: https://github.com/gruntjs/grunt-contrib-watch