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.
Related
I've tried to configure uncss using grunt
I've installed
npm install grunt-uncss --save-dev
npm install grunt-processhtml --save-dev
Configuration
uncss: {
dist: {
files: { 'dist/css/clean.css': ['index.php'] }
}
}
at the end I load them in and register a default task like this :
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-processhtml');
grunt.registerTask('default', ['uncss', 'processhtml']);
Result
When I run grunt
at the end I keep seeing :
Running "uncss:dist" (uncss) task
Fatal error: PhantomJS: Cannot open about:blank
Update
I added :
processhtml: {
dist: {
files: {
'index.php': ['index.php']
}
}
}
Still get the same error after running grunt
If this is all of your code, you are not referencing any stylesheets to remove code from. All you are doing is telling grunt where the cleaner file should go, and to remove any unused css from index.php. However, it doesn't know where the styles for index.php live, so it has nothing to do... You need to actually configure your processhtml and tell uncss which stylesheets you would like to clean up.
Read the directions friend:
grunt-uncss github readme.md
I have that problem with my project and the solution is here:
You need update the uncss module, remember grunt-uncss is only a way to use uncss node package. In my case my version of that was in 0.12.1 and updating that package the problem was fixed. Let me know if this help you.
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 ?
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.
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. :-)
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'
}
}
});