Seems this is not solved besides being a recurrent question.
This is my folder structure:
project/
|
|--src/
| |--images/
| +--styles/
| +--style.css
|
+--build/
|--images/
+--style.min.css
Note how src/styles/style.css will reference url(../images/image.png) while the minified version build/style.min.css should reference url(images/image.png)
What combination of options for cssmin or clean-css can achieve this?
My current configuration:
cssmin: {
target: {
files: {
'build/style.min.css': 'src/styles/style.css'
}
}
}
Related
after running gulp sass files are not compiled into CSS. I have checked directories and all looks fine.There is no error, gulp is running as if there is no .SASS file in the src/styles directory. Nothing is produced in dist/css folder. Any help would be appreciated. Thanks
Here is the gulpfile.js
var gulp = require('gulp'),
compass = require('gulp-compass');
gulp.task('compass', function () {
return gulp.src('src/styles/main.sass')
.pipe(compass({
sass: 'src/styles',
image: 'src/images',
css: 'dist/css',
generated_images_path: 'dist/images',
sourcemap: true,
style: 'compressed'
}))
.on('error', function(err) {
console.log(err);
});
});
gulp.task('default', function () {
gulp.watch('./src/styles/**/*.sass', ['compass']);
gulp.watch('./src/images/**/*', ['compass']);
});
my directory structure
root
|
|
+-- src
| |
| +-- styles/sass
| +-- images
|
+-- dist
|
+-- css
+-- images
This problem was solved by installing compass and sass as ruby gems and adding ruby path to the environment variables.
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!
The current project structure is somewhat like this:
-index.html
|
-bower.json
|
+-bower_components
The proposed project structure will add a few more static html files in the project root. Till now I have been managing all the frontend dependencies in bower.json and had it automatically included in index.html using the grunt-wiredep task. But with new files getting added, each file will have different set of dependencies.
-index.html
|
-file-with-some-other-bower-dependency.html
|
-bower.json
|
+bower_components
What would be an efficient way of managing these files with different bower dependencies?
You can do two different task, each with their own dependencies (bowerJson) :
grunt.initConfig({
wiredep: {
app: {
src: 'index.html',
"bowerJson":{
"dependencies": {
"jquery":"=2.1.3",
...
}
}
},
app2: {
src: 'file-with-some-other-bower-dependency.html',
"bowerJson": {
"dependencies": {
"bootstrap": "~3.0.0",
...
}
}
}}
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've been looking for a solution to my issue and I've found posts with similar problems, but not the same. I have the following folder structure:
js
└── GUIFramework
├── external
└── WaspFramework
├── Core
└── GUI
└── Controls
└── WaspMask
├── css
│ └── WaspMask.css
└── resources
└── default_loader_circle.gif
Inside WaspMask.css file I have this rule:
.wasp-loader-default {
background-image: url("../resources/default_loader_circle.gif");
}
Well, I've tried to minify it (combined with other css files) with cssmin plugin. My gruntfile is placed in WaspFramework folder, and I want generate the minified css there. The gruntfile file looks like this:
module.exports = function (grunt) {
var _sources = grunt.file.readJSON('./sources.json');
var _filesCSS = _sources.css;
grunt.initConfig({
cssmin: {
wasp: {
options: {
keepSpecialComments: 0
},
files: {
'wasp-bundle.min.css': _filesCSS
}
}
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-cssmin');
// register at least this one task
grunt.registerTask('default', ['cssmin']);
};
In _filesCSS I have the paths of all the files to minify and combine, WaspMask.css included.
My problem is that with this configuration of cssmin, the url of the wasp-loader-default class hasn't changed so, obviously, the output file can't find the image. I've tried changing the cssmin options, adding the root property:
options: {
keepSpecialComments: 0,
root: '.',
},
It changes the url to /GUI/Controls/WaspMask/resources/default_loader_circle.gif, but it doesn't work because of the first slash of the path. I would need to get a relative path to the output file (GUI/Controls/WaspMask/resources/default_loader_circle.gif should work) because my application is published under a virtual directory. So I can't use a full path from the root of the application. I've even tried to set other values to root but some of them change the url to a full path and others add the first slash to the returned path.
Any idea about how to solve this?
After being looking for a solution to my problem, I've found the property I need in this issue of the 'cssmin' plugin:
https://github.com/gruntjs/grunt-contrib-cssmin/pull/47
Although I've found a little issue while I was compressing the 'bootstrap.css' file in my vendor's bundle file. This issue and a possible solution (basically, setting "noAdvanced" property to true in the task's options) is explained deeply in the post I did yesterday:
https://github.com/gruntjs/grunt-contrib-cssmin/issues/103
EDIT:
Here is my grunt file:
module.exports = function (grunt) {
var conf = grunt.file.readJSON('sources.json');
grunt.initConfig({
cssmin: {
options: {
keepSpecialComments: 0,
target: 'commonDir',
noAdvanced: true
},
test: {
files: {
'test.min.css': conf.css
}
}
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-cssmin');
// register at least this one task
grunt.registerTask('default', ['cssmin']);
};
The target property is the common physical directory to all the files to minify (I load those files through a json file which contains their paths).
noAdvanced property is the option I use to avoid the problem I've explained with bootstrap.css, although in the last comment by #XhmikosR posted in https://github.com/gruntjs/grunt-contrib-cssmin/issues/103, he says that there is a patch to fix it. I've not checked it yet.