Setting Compass destination folder when source folder has subfolders - css

I am using Compass through grunt to compile a SASS file. My directory structure looks like this:
project/
Gruntfile.js
package.json
sass/
part1/
part1.sass
css/
And my Gruntfile.js:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
std: {
options: {
sassDir: 'sass',
cssDir: 'css',
specify: 'sass/part1/part1.sass',
raw: 'disable_warnings = true\n'
}
}
}
});
When I run my gruntfile, Compass outputs to project/css/part1/part1.css, but I want it to output to project/css/part1.css instead. How can I do this? Right now I am using an on_stylesheet_saved hook to move the file, but it is not very elegant.
Hopefully the question is clear, and thanks in advance.

I recreated your environment. I could simplify the Gruntfile.js even more:
module.exports = function(grunt) {
// Main project configuration
grunt.initConfig({
// Read NPM package information
pkg: grunt.file.readJSON('package.json'),
// Compass
compass: {
std: {
options: {
cssDir: 'css',
sassDir: 'sass'
}
}
}
});
// Load the grunt tasks
grunt.loadNpmTasks('grunt-contrib-compass');
// Compile production files
grunt.registerTask('std', [
'compass:std'
]);
// Default task(s)
grunt.registerTask('default', 'std');
};
What you are getting is the expected compass behavior.
Reading a bit through the grunt-contrib-compass's readme, I see:
Compass operates on a folder level. Because of this you don't specify any src/dest, but instead define the sassDir and cssDir options.
That means that you cannot change the path to where your CSS gets compiled to, only determine the path of the root folder to which all compiled files are written to.
While it can be annoying, compass is simply assuming that keeping the compilation true to the directory structure is supposed to be something you would rather do - which is somewhat opinionated.
You could still do what you want, by:
Restructuring your files so that they are where compass would expect them to be to comply to your intention. Namely dropping the part1 directory and placing part1.sass under the sass folder.
Compiling your CSS files to a temporary folder like tmp, using another task like copy (grunt-contrib-copy) to copy all CSS files to the css folder and then use a task like clean (grunt-contrib-clean) to empty the tmp file. You would load the tasks in that order, so they run in the right sequence.

Related

Grunt usemin does not replace asset with revved version

I searched alot and already found some links but none of them solved my issue. I use grunt-rev to revision my assets. This works. What was not working is, that the revisioned files are not used if I execute task grunt usemin.
The usemin config looks like this:
usemin: {
html: './app/views/environment/production/index.blade.php',
options: {
assetsDirs: ['./public/assets/dist/stylesheets']
}
},
The directory stylesheets has a file named 58640bd4.default.css
Can someone help me ?

How does my project find files in Grunt's .tmp directory?

I currently am using a Yeoman seed project which comes with a Gruntfile and I'm having some trouble understanding parts of it. One particularly confusing thing is that during the development phase my SASS files are compiled into CSS and placed into a .tmp directory. My project however looks for main.css under app/styles yet the only thing there is my scss file. How is my project able to find main.css when it's not where it's looking?
./myApp
--Gruntfile.js
--.tmp
----main.css
--./app
----styles
------main.scss
When I create the dist folder the main.css file is placed correctly where it should be.
I think it may have to do with the compass or live-reload plugin.
I believe that you are talking about the situation when you ran grunt serve.
In the situation, the built-in server provides files under both .tmp and app directories by default which is specified for grunt-contrib-connect in Gruntfile like followings.
// The actual grunt server settings
connect: {
...
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= config.app %>'
]
}
},
This is why "styles/main.css" in index.html file goes to .tmp/styles/main.css.

Chaining Grunt tasks

Is it possible to chain Grunt tasks so the output of one task is fed into another task without being written to the disk first? For example, could I compile Stylus files into CSS, prefix them with Autoprefixer and then compress them using grunt-contrib-cssmin without writing intermediate files to the disk? I ask because it's a pain to store and reference files between my source and build directories.
I don't believe there is, but I have another way for you. Store the path in a configuration object in your initConfig. By using grunt's built in underscore templates you can have the file path defined once (so it's easier to manage).
module.exports = function(grunt){
grunt.initConfig({
pathTo: {
css: 'dist/css/master.css'
},
cssmin: {
dist: {
files: {
'<%= pathTo.css %>': ['<%= pathTo.css %>']
}
}
},
clean: {
dist: ['dist']
}
});
}
I also recommend using grunt-contrib-clean to erase your dist folder before it is built. This way all of the files that end up in there have been generated by Grunt, so if you change your mind about a file path or item in there you don't have to manually clean it up. Hope this helps. :-)

Javascript package management with bower and grunt

So in my project my javascript comprises of
Third party libraries (jquery, bootstrap, jquery plugins etc)
Custom libraries
Code embedded inline in the html in view files between <script>$(function(){});</script>
Pretty standard stuff.
My goal was to find a reliable, automated way, to minify all my separate javascript files (approx 25 files) into one file for production.
I've installed bower and it seems like a good way to keep my external libraries up to date. I've also installed grunt. I'm using a bower plugin in grunt that copies all downloaded files to a specified directory, then concat can look in that directory to combine them and finally uglifyJS minifies the file. Again, it seems like a standard setup of grunt.
The bower plugin will create a folder like
vendorjs
- bootstrap.js
- jquery.js
- etc
concat will then read from this dir, and as the files are in alphabetical order will combine them in an incorrect order, bootstrap before jquery, so it wont be of use.
I'm aware of RequireJS, but it seems like overkill for my needs. And it also seems like I'd need to rewrite all of my js to comply with the requirements of RequireJS.
Is there some configuration I'm missing that will help with my problem? Am I going about this in the wrong way?
Edit this is my Gruntfile.js for more clarity.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
bower: {
dev: {
dest: 'vendorjs',
options: {
stripJsAffix: true
}
}
}
concat: {
options: {
separator: ';'
},
dist: {
src: ['vendorjs/*.js'],
dest: 'vendor.js'
}
},
uglify: {
dist: {
files: {
'../../public/js/admin/vendor.min.js': ['vendor.js']
}
}
}
});
};
I'm not sure what your config looks like, but you can easily specify the order of files in grunt-contrib-concat:
grunt.initConfig({
concat: {
dist: {
src: ['src/jquery.js', 'src/bootstrap.js'],
dest: 'dist/built.js'
}
}
});

Grunt compass and sass/css directory

I updated the latest version of grunt (0.4.1) and installed the compass package (grunt-contrib-compass).
Here the config I use:
compass: {
dist: {
options: {
sassDir : "src/theme/sass",
cssDir : "src/theme/css",
imagesDir: "src/theme/img",
javascriptsDir : "src/js",
fontsDir : "src/theme/fonts",
environment : "production"
}
}
}
Every time a change occurres in the sass directory, the compass task is executed and the css directory is created (with the production css files).
Everything is good but the css files, the config.rb files and the sass cache are also recopied in the sass directory.
Has someone ran into the same problem?
As you have a config.rb, consider actually using it:
compass: {
dist: {
options: {
config: 'config/config.rb'
}
}
}
Old question, but I ran into this problem once. But the problem was me running the compass command instead of grunt compass so default configuration was been used.

Resources