I have the following folders and files:
js/
lib/
jQuery.js
compiled/
all.js
file1.js
file2.js
I want JSHint to lint only file1 and file2 (without having to specify the exact files) and for it not to lint the lib folder and compiled folder.
Can anyone shed any light on why my JSHint task below is linting all .js files and not ignoring the compiled and lib folders?
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'js/**/*.js',
'!js/compiled/**/*.js',
'!js/lib/**/*.js'
]
},
Try
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'js/*.js',
'!js/compiled/*.js',
'!js/lib/*.js'
]
},
You don't need the ** as you don't have any intermediate folders.
Related
In my application SCSS files gets compiled to CSS files and all the files included in one main.css file. There are some other CSS files which also gets included in main.css file, how can I using Grunt create one CSS file from all these CSS and SCSS files?
Note: All my CSS file is in client folder and SCSS file after compilation goes to public folder.
MSK
What you are looking for is (file)-concatination.
There is an excellent plugin for grunt: grunt-contrib-concat
Example-Configuration (static):
concat: {
dist: {
//Add your files to src
src: [
'client-folder/file1.css',
'public/compiled.css'
],
dest: 'output/style.css',
},
},
Example-Configuration (dynamic):
concat: {
dist: {
src: [
//Will use all .css files in client-folder/
'client-folder/**.css',
'public/compiled.css'
],
dest: 'output/style.css',
},
},
grunt concat:dist will then concat the content of your src files into the dest file.
You can dig deeper into the documentation for more grunting fun.
Hello people of the world. I've been trying to automate my grunt workspace for a static web app. An example of my file structure is below. My current grunt setup watches for changes in files in the src folder, and if there is a change, it processes and updates only the files that have changed using grunt-newer, and puts them in the minified folder.
Let's say that I delete styles.scss from the src folder. Then I also need the corresponding styles.css to get deleted. Is there any way that I can automate this with Grunt? As shown in the problem above, I also need it to know that styles.css in the minified folder corresponds to styles.scss in the src folder.
File structure:
src
styles.scss
index.haml
minified
styles.css
file.html
Edit: Something like this: https://github.com/tschaub/grunt-newer/issues/15
Note that there is no solution to that issue
You can do something like this on your GruntFile:
sass: {
dist: {
files: {
'style/style.css' : 'sass/style.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['clean','sass'],
options: {
event: ['deleted'],
},
}
},
clean: {
dist: {
files: [{
src: [
'dist/*.css'
]
}]
}
}
As it, if you delete (and only deleted) a .saas file, your dist folder will be automaticly cleaned and your sass file rebuild.
It use:
grunt watch: https://github.com/gruntjs/grunt-contrib-watch
grunt saas: https://github.com/gruntjs/grunt-contrib-sass
grunt clean: https://github.com/gruntjs/grunt-contrib-clean
A nice tutorial: http://ryanchristiani.com/getting-started-with-grunt-and-sass/
Hope this help!
I am using grunt-contrib-concat and I need a way to automate my vendor concatenation step.
Right now, I specify manually in my GruntFile what vendor libraries should be concatenated.
Is there a way to get their names from my index.html? Using just the contrib-concat plugin and not usemin?
Any ideas?
concat: {
app: {
files: {
'dist/js/app.js': [
'src/**/*.js',
'!src/**/*.spec.js', // Exlcude the spec files.
'tmp/*.js'
]
}
},
vendor: {
src: [
'vendor/angular/angular.js',
'vendor/angular-route/angular-route.js',
'vendor/angular-bootstrap/ui-bootstrap-tpls.js'
],
dest: 'dist/js/vendor.js'
}
},
I'm new with Grunt and I wasn't able to find what I'm looking for.
I have this folder's structure configuration :
app/
public/
assets/
... some javascript/css libs like jQuery, Bootstrap, etc
css/
js/
img/
What I'd like to do is compress all the js files in public/assets/ into one assets.js file that would be in js/assets.js, and do the same for all the css files into assets.css in css/assets.css.
Moreover, I'd like those two assets.js/css file to be compressed.
A link to a solution or some start of a solution is all I need.
Thank you!
Firstly you need to concatenate your files and then run them through a minifier. Grunt has plenty of plugins that will do these things but some of the more popular ones are grunt-contrib-concat, grunt-contrib-uglify and grunt-contrib-cssmin.
These tasks have plenty of options available to taylor them to your needs but this should help you get started.
As sample configuration for the concat task would be something like:
grunt.initConfig({
concat: {
options: {
separator: ';',
},
js: {
src: ['public/assets/a.js', 'public/assets/b.js', 'public/assets/c.js'],
dest: 'public/js/assets.js',
},
js: {
src: ['public/assets/a.css', 'public/assets/b.css', 'public/assets/c.css'],
dest: 'public/css/assets.css',
},
},
});
Then for your minify js task:
uglify: {
js: {
files: {
'public/assets/js/assets.min.js': 'public/assets/js/assets.js'
}
}
}
And finally, css minify task:
cssmin: {
files: {
'public/assets/css/assets.min.css' : 'public/assets/css/assets.css'
}
}
I would like to exclude libs directory from being lint'ed. However, ignores in options and planted .jshintignore file in project directory won't make libs to be excluded.
jshint: {
options: {
smarttabs: true,
ignores: ['public/js/libs/**/*.js']
},
all: [
'Gruntfile.js',
'public/js/**/*.js'
]
},
grunt version:
grunt-cli v0.1.11
grunt v0.4.2
grunt-contrib-jshint#0.7.2
What did I miss out?
ignores is a jshint option and expects specific files. It's better to use the idiomatic Grunt negate ! to exclude files:
jshint: {
options: {
smarttabs: true
},
all: [
'Gruntfile.js',
'public/js/**/*.js',
'!public/js/libs/**/*.js'
],
},
See http://gruntjs.com/configuring-tasks#globbing-patterns