I've executed compass watch in a Zurb Foundation project.
It works great, my assets are compiled as I make settings changes.
However, I'd like to also run additional a few grunt commands each time I make changes.
How can I add to the actions that compass performs when changes are detected?
Specifically, I'd like to run two commands from another directory.
This is what I've got:
cd /dir_foundation/
bundle exec compasss watch
After each change, I want it to also call:
grunt sass:dist
grunt cssmin
These grunt tasks are defined in a gruntfile that is 2 directories "up" from the /dir_foundation/ where the compass watch command is monitoring changes.
I found an answer.
http://compass-style.org/help/documentation/configuration-reference/#callbacks
This is what I added to my config.rb file:
on_stylesheet_saved do |file|
system('../../../compile.bat')
end
Where "compile.bat" contains:
grunt sass:dist
grunt cssmin
Related
I am working with grunt and when I write "grunt build" my dist folder builds everything, except for the js files. I get the following message:
I'm guessing I have to edit my Gruntfile, but I'm not sure how to go about solving this.
My Gruntfile is long, but here is the uglify part:
What does it mean by the destination was not written because src files were empty
It means the files listed in dist: {src:"<%config.app%>*" were not created yet. Use the following process:
Run copy and uglify manually and verbosely
grunt copy:dist --verbose
grunt uglify:dist --verbose
If it works, reorganize the task in question in the registerTask method:
grunt registerTask("build", ['copy:dist','uglify:dist']);
Otherwise, dump the <%config.app%> path to make sure it is correct
grunt.registerTask('dump', 'Dump Output', function(){ console.log(grunt.config.get() ) });
References
Grunt API: grunt.config.get
Grunt Documentation: Using the CLI
I would like to get the registered Tasks from a gruntfile via terminal.
Example:
grunt.registerTask('test', ['clean', 'compass', 'uglify', 'cssmin', 'imagemin', 'copy:test', 'ftp-deploy:test', 'clean']);
then on the terminal I would type something like
$> grunt --listtasks
Even better if I could register each task with a description like so:
grunt.registerTask('test', 'this task deploys to testserver',['clean', 'compass', 'uglify', 'cssmin', 'imagemin', 'copy:test', 'ftp-deploy:test', 'clean']);
Then the output could be something like:
$> test: this task deploys to testserver (clean, compass, uglify, cssmin, imagemin, copy:test, ftp-deploy:test, clean)
Run grunt --help to get a list of all registered tasks. This shows the command and the task description. Example output:
$ grunt --help
Grunt: The JavaScript Task Runner (v0.4.1)
Usage
grunt [options] [task [task ...]]
Options
--help, -h Display this help text.
--base Specify an alternate base path. By default, all file paths
are relative to the Gruntfile. (grunt.file.setBase) *
--no-color Disable colored output.
--gruntfile Specify an alternate Gruntfile. By default, grunt looks in
the current or parent directories for the nearest
Gruntfile.js or Gruntfile.coffee file.
--debug, -d Enable debugging mode for tasks that support it.
--stack Print a stack trace when exiting with a warning or fatal
error.
--force, -f A way to force your way past warnings. Want a suggestion?
Don't use this option, fix your code.
--tasks Additional directory paths to scan for task and "extra"
files. (grunt.loadTasks) *
--npm Npm-installed grunt plugins to scan for task and "extra"
files. (grunt.loadNpmTasks) *
--no-write Disable writing files (dry run).
--verbose, -v Verbose mode. A lot more information output.
--version, -V Print the grunt version. Combine with --verbose for more
info.
--completion Output shell auto-completion rules. See the grunt-cli
documentation for more information.
Options marked with * have methods exposed via the grunt API and should instead
be specified inside the Gruntfile wherever possible.
Available tasks
rosetta Shared variables between JS and CSS. *
asciify Ascii awesomizer. A Grunt task for better banners and hot
logs. *
clear Clear your terminal window
clean Clean files and folders. *
concat Concatenate files. *
jshint Validate files with JSHint. *
sass Compile Sass to CSS *
watch Run predefined tasks whenever watched files change.
csso Minify CSS files with CSSO. *
lintspaces Checking spaces *
newer Run a task with only those source files that have been
modified since the last successful run.
any-newer Run a task with all source files if any have been modified
since the last successful run.
newer-timestamp Internal task.
svgmin Minify SVG *
trimtrailingspaces Removing the trailing spaces *
webfont Compile separate SVG files to webfont *
Tasks run in the order specified. Arguments may be passed to tasks that accept
them by using colons, like "lint:files". Tasks marked with * are "multi tasks"
and will iterate over all sub-targets if no argument is specified.
The list of available tasks may change based on tasks directories or grunt
plugins specified in the Gruntfile or via command-line options.
For more information, see http://gruntjs.com/
Or have a look at grunt-available-tasks:
I just installed the foundation in my application base directory by executing the following command:
compass create myprojectname -r zurb-foundation --using foundation
Now I have open the sass/_settings.scss file and I have un-comment the 66th line that is the following:
$include-html-classes: true;
finaly, I try to compile my foundation project in order to include the html classes by executing the following command:
compass compile
but I am getting the following result in my command prompt:
Nothing to compile. If you're trying to starta new project, you have left off the directory argument.
Run "compass -h" to get help.
also, based on this page : http://foundation.zurb.com/old-docs/f3/compass.php I try to compile my scss code by using the command:
compass watch
but again I am getting the same message as with compile argument next to compass.
Note: I am executing the above commands in the same directory I run the first command for the foundation project creationg.
Note: I am very new user on compass, sass, foundation framework. Actually, today is the first time I am using them, so I am not expirienced user. Please be kind with me :)
Is there anybody to help me with that ?
When you use compass create [directory_name], Compass creates your project within ./[directory_name] relative from your current directory (running compass create without the directory name would have created the project in the current directory). In order to compile or watch a Compass project, you need to do either of the following things:
Tell Compass where your project is via compass compile [path_to_config.rb]
Change to the directory where config.rb is found and run compass compile
Alternately, you could move your config.rb to where you want to run your command. Just make sure you edit the paths to directories configured within said file.
I would like to run Ruby/Sass from the directory root I have my all projects saved using a batch file.
Ruby version: 1.9.3
Sass version: 3.2.7
For instance:
D:\all-projects
I would like run SASS.bat from the root folder and it should automatically execute the watch function watch for sass on all projects, like this:
sass --watch D:\all-projects/sass:public/stylesheets
At the moment I got this:
#echo off
cmd.exe /E:ON /K C:\Ruby193\bin\setrbvars.bat
sass --watch D:\all-projects/sass:public/stylesheets
This starts only ruby in the root directory but does not run the watch function for Sass.
I'm looking for this solution because it would make the usage of Sass a lot easier and effective.
At the moment you have to run RUBY -> look up for the directory -> run sass --watch ...
How can I do this? What should I change in order to make this work?
I welcome all hints and helps.
Thanks in advanced.
Try this and see if it works:
#echo off
cmd.exe /E:ON /K C:\Ruby193\bin\setrbvars.bat
START /B sass --watch D:\all-projects\sass:public\stylesheets
PAUSE
I have created batch files for SASS in the past and did something similar to this. However I never had to run Ruby in the BATCH file. So I am sort of curious as to why you need to start ruby.
EDIT: (basic example)
This is all you should need to create a basic batch file with SASS.
-Create a Batch file called test.bat with the following code and save to your desktop.
#echo off
sass --watch file.scss
PAUSE
-Create a blank .scss file called test.scss and save to your desktop.
-Now run your batch file and it should create file.css and say...
>>> Sass is watching for changes. Press Ctrl-C to stop.
overwrite file.css
I have recently started using SASS in my web development. Thus far, I've found it to be a very useful utility, however I have run into a minor usibility issue.
This website I am working on has SASS files in multiple locations, for example in /css as well as in /blog/css.
Currently, to keep sass watching both directories, I need to create two different terminal tabs and run sass --watch css/:css/ on one, and sass --watch blog/css/:blog/css/ on the other.
It would be awesome if I could make a file or something of the following format:
css/:css/
blog/css/:blog/css/
And then just pass this config file to sass and have it watch both locations. Is this possible?
You could use foreman to run multiple processes:
gem install foreman
Create a Procfile in the root directory and add something along these lines:
sass: sass --watch css/:css/
sass: sass --watch blog/css/:blog/css/
To start both use:
foreman start