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'
}
}
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 setup a grunt tast to compile all sass and scss files into css using grunt-contrib-sass.
The issue I am facing is because it's a modular architecture, I don't have a single sass and css folder.
Instead I have a sass and css folder for each module.
When I specify the module name it works and compiles the sass file into css, but only for that module, like so:
sass: {
dev: {
expand: true,
cwd: 'public/modules/someModuleName/sass',
src: ['*.{scss,sass}'],
dest: 'public/modules/someModuleName/css',
ext: ['.css']
}
}
Instead I need it to compile the sass files into css for each module dynamically, like so:
sass: {
dev: {
expand: true,
cwd: 'public/modules/**/sass',
src: ['*.{scss,sass}'],
dest: 'public/modules/**/css',
ext: ['.css']
}
}
Here is the folder structure:
|-public
|--modules
|---SomeModuleName1
|----Sass
|-----*.scss
|----CSS
|-----*.css
|---SomeModuleName2
|----Sass
|-----*.scss
|----CSS
|-----*.css
From the looks of the directory structure and based on the mean.io tag, I'm assuming you are using meanjs.org or mean.io.
What I did and recommend is that if you are going with sass, you go all in sass.
Rename your each css folder under public/modules/*/ to scss
Convert the existing *.css files to *.scss files
Create a new [style/scss/stylesheets] folder in the public directory
Create a new file(style.scss or main.scss) as the main style file. Recommend main.scss as a convention.
In your main.scss you import the module scss files:
#import "../modules/core/style/core";
#import "../modules/users/style/users";
This step is kind of annoying and I'm sure it can be automated somehow. (2 options below)
https://www.npmjs.com/package/grunt-sass-directory-import
https://github.com/chriseppstein/sass-globbing
For your sass task:
sass: {
options: {
sourcemap: 'none',
update: true
},
dev: {
options: {
lineNumbers: true
},
files: {
'public/dist/application.css': 'public/style/main.scss'
}
},
dist: {
options: {
style: 'compressed'
},
files: {
'public/dist/application.min.css': 'public/style/main.scss'
}
} },
Cleanup work to your gruntfile:
You would need to add clientSCSS to your watchFiles if you want and
run the sass:dev task.
csslint task is not needed and should be
replaced with scsslint.
cssmin task is not needed as the sass:dist
has the compressed option.
Cleanup work in all.js and production.js:
Remove references to *.css files in the assets:lib:css and assets:css with the exception of public/dist/application.css and public/dist/application.min.css
Use the corresponding sass version of bootstrap if you want instead and follow the #include approach in main.scss
My directory structure looks like below:
--myapp/
--client/
--build/
--css/
--js/
--angular/ #angular libraries here
--angular.js
--angular-resource.js
--angular-ui-router.js
--jquery/ #jquery libraries here
--jquery.js
--app.js
--index.html
--server/ #All server related files here
--Gruntfile.js
My Grunt file so far looks like this
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
concat: {
dist: {
src: ['client/js/angular/*.*]
dest: 'client/build/angular-build.js'
}
}
});
};
This is as far as I have gotten. Don't see any easy grunt file tutorials on this.
Th ouput I am looking for is all angular libraries in one output file. All jquery libraries in another.. all css libraries in third.
How do i achieve this ?
A few things:
You don't know it, but you're using grunt-contrib-concat, so you'd better npm install that and grunt.loadNpmTasks('grunt-contrib-concat'); it.
Concat doesn't support wildcards. This is good, because the order that these files are included is going to matter. angular.js must be included before angular-resource.js
I've included a rough template of what your Gruntfile needs to look like to accomplish this, but know that this is not the right way to do this. You should be loading your dependencies using something like bower and serving them individually, or using something like Browserify or Require.js. You'll come to see the value of that as the project progresses.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
concat: {
angular: {
src: [
'client/js/angular/angular.js',
'client/js/angular/angular-resource.js',
'client/js/angular/angular-ui-router.js'
]
dest: 'client/build/angular-build.js'
},
jquery: {
src: ['client/js/jquery/jquery.js']
dest: 'client/build/jquery-build.js'
},
...
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
};
I'm trying to get sass working with grunt but there's a few things that aren't very clear, even after reading the documentation.
In my gruntfile I have:
grunt.loadNpmTasks('grunt-contrib-sass');
compass: {
files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['compass']
},
grunt.registerTask('default', ['sass']);
My questions is should I create scss or css files inside my styles folder and in my html file, should I link to css or scss files?
Also, if I have a very large amount of style files, should I always include each one of them manually or is there an easier way, like in rails where every file inside the styles folder is added automatically?
EDIT
This is what my project structure looks like, only change I've made from the default yeoman angular app was adding the random.scss file that I'm trying to turn into regular css.
Your config is kind of wrong, mixing compass with sass. Take a look at that config: https://github.com/gruntjs/grunt-contrib-watch#examples
Of course you create sass or scss files that compile to css. That's what sass is for. In your html you include your final compiled css-files. You could use a plugin like assetpush which could generate the html in your files from the compiled css files. A config maybe could look like this:
grunt.initConfig({
sass: {
compile: {
files: {
'<%= yeoman.app %>/styles/main.css': ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}']
}
}
},
assetpush: {
css: {
files: {
"path/to/your.html": ["css/*.css"]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-assetpush');
grunt.registerTask('default', ['sass', 'assetpush']);