I'm trying to use guard livereload and guard compass together. Here is my file
A sample Guardfile
# More info at https://github.com/guard/guard#readme
guard 'compass' do
watch('^sass/(.*)\.s[ac]ss')
end
guard 'livereload' do
watch(%r{.+\.(css|html|js)$})
end
# This will concatenate the javascript files specified in :files to public/js/all.js
#guard :concat, type: "js", files: %w(), input_dir: "public/js", output: "public/js/all"
#guard :concat, type: "css", files: %w(), input_dir: "public/css", output: "public/css/all"
#guard 'uglify', :destination_file => "public/javascripts/application.js" do
# watch (%r{app/assets/javascripts/application.js})
#end
When i begin to guard, without enabling the chrome live reload extension, my sass files are compiled and work well.
But when I enable the livereload extension, my terminal says that browser is connected, and then when i make changes in my sass files, nothing happens (neither the page reloads, nor the sass files are compiled).
Does anyone have any ideas ?
For the moment, I'm lauching two terminals in windows, one where I do compass watch, and one where I do guard (I commented the compass part of the GuardFile).
If someone has a better solution
This is how I do it and works perfectly.
puts "Using default guard file."
group :development do
if File.exists?("./config.rb")
# Compile on start.
puts `compass compile --time --quiet`
# https://github.com/guard/guard-compass
guard :compass do
watch(%r{(.*)\.s[ac]ss$})
end
end
guard :livereload, :host => '127.0.0.1', :port => '35729', :grace_period => 0.5 do
watch(%r{.+\.(css|js|html?|php|inc|theme)$})
end
end
All this does is tells Compass where my config.rb is... Which is in the base of my site where my Guardfile is kept. Then it has compass compile the SCSS.
Not sure about your situation but in mine I needed to set the host and port for it to work smoothly. But basically guard will watch for a change and once compass outputs the css file LiveReload notices the change and then reloads that file. Pretty simple.
Im sure you know already but add all the correct Gems to your Gemfile, run 'bundle' on your project and then initiate Guard using $ guard
In your browser make sure you hit the LiveReload button and it will tell you in the terminal that browser is connected and away you go.
Hope that helps.
Related
I don't know if I can explain the issue without pasting the whole code of all files but I'll try.
EDIT I've added the whole code to Github Account - My Sass structure
I use Windows 8.1 and Compass 0.12.6
In my public_html folder I have config.rb file and stylesheets folder. In stylesheets folder I have directory sass where I keep all sass files. CSS files are generated into stylesheets/preview folder (for development purposes) and into stylesheets folder (for production purposes).
I run compass watching running watch.bat script that I have in public_html folder
Content of watch.bat is:
START compass watch -c config.rb -e development
START compass watch -c config.rb -e production
EXIT
My config.rb file is:
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "../"
sass_dir = "stylesheets/sass"
images_dir = "img"
javascripts_dir = "js"
cache = false
relative_assets = true
add_import_path "stylesheets/sass"
if environment == :development
css_dir = "stylesheets/preview"
line_comments = true
output_style = :nested
end
if environment == :production
css_dir = "stylesheets"
line_comments = false
output_style = :compressed
end
In stylsheets/sass I have 4 files print.scss , medium.scss, small.scss and large.scss
Both medium.scss and large.scss begin with:
#import "base/_init";
This file import partial _init from base folder and this one loads another partials and other partials load another partials.
The problem is when I change something in partial Compass doesn't always compile all necessary output files. For example I've just changed something in _settings.scss partial and this one is finally loaded by medium.scss and large.scss (I remind that those 2 files have the same beginning so they both should be compiled). Somehow only medium.scss file is being in fact watched and large.scss file is not compiled as it should be in this case.
I have had such situation just before. I stoped 2 watchers (CTRL + C and Y) and then run again my watch.bat not changing anything in files - just after running I have info:
Change detected at 15:51:33 to: large.scss overwrite stylesheets/preview/large.css
Compass is polling for changes. Press Ctrl-C to Stop.
and
Change detected at 15:51:33 to: large.scss overwrite stylesheets/large.css
Compass is polling for changes. Press Ctrl-C to Stop.
So in fact there was change that should be watched but somehow compass/sass doesn't always catch it.
Sometimes neither of 2 watchers catch changes and I have to stop them and once again run watch.bat so it's not very convenient to work that way.
Sometimes even happen that watchers are stopped (as I presed CTRL +C + y) but I haven't pressed anything and in cmd there's no question about closing visible. They've just stopped
Question: What could be wrong and how to fix it?
I've cloned and checked your project structure, and your problem is simply the unnecessary use of the Import Once plugin. If you comment the first line of your config.rb (where this plugin is activated), your stylesheets will be compiled normally. Each main scss file you have (large.css, medium.css, small.css) is rendered to a separated css file, and you're not repeating your imports for each one of these files.
Below is the sequence of your imports with the Import Once plugin disabled:
I dont't know exactly how to solve your problem.
I think basically it's a bug or problem with two instances of compass running at the same time on the same folder.
But due to your environment, I have a suggestion that can do the trick for you.
Why, instead of having two folders with the assets, one for prod. and dev., you just keep one, for both dev. and prod.
What you can set on compass is to output css in the way you want for dev. and then pass that css through a yui filter (or whatever) for prod. This will minify all assets. If you are using symfony, you can use assetics, for instance.
That's the way we do and works perfect. We don't use assetics for compass... that's another topic :D
If you don't use any framework or extra filters, you can alway manually dump the assets when this ones are ready for production.
This way you avoid using two compass instances at the same time and also to compile manually for every deploy on production.
I really think it have to do with having two instances of compass running.
I have guard (the ruby gem) setup and working it seems on my Mac and setting up a guard from guard-coffee and guard-shell seem to work fine. Here is the related section of my Guardfile below
guard 'coffeescript', :input => 'src/javascripts', :output => 'public/javascripts'
guard 'shell' do
watch( %r{^public/.+\.(js|css)$} ) do |m|
puts m.inspect
if m[1] == 'js'
puts 'a js is new!'
else
puts 'a css is new!'
end
puts %x{ echo #{File.mtime(m[0])} }
end
end
Which seems to output 'a js is new' twice if I edit a coffeescript file. With debug on it seems to run after
13:39:23 - DEBUG - Hook :run_on_changes_begin executed for Guard::CoffeeScript
13:39:23 - INFO - Compile src/javascripts/blah.coffee
13:39:23 - INFO - 01:39:23 PM Successfully generated public/javascripts/blah.js
["public/javascripts/blah.js", "js"]
a js is new!
and
13:39:23 - DEBUG - Hook :run_on_changes_end executed for Guard::CoffeeScript
["public/javascripts/blah.js", "js"]
a js is new!
It does seem to only fire once if I edit the blah.js file directly. I was a little confused by how hooks work, can I key into a hook from another guard? Should I just run this code in a callback in the coffeescript guard? I was trying to use groups and only do the shell part if I was in a group and didn't want to have to repeat the coffee guard in the case where I would use a callback instead.
Any thoughts on how I can stop triggering the shell guard twice when the coffe one fires?
Prior to Guard 1.0.0, new files created and updated from a Guard plugin did not trigger a subsequent file change for other plugins. This was a problem for example with the CoffeeScript and LiveReload plugins: When a JavaScript file has been updated, then LiveReload did not reload the file. As a workaround I added some manual file trigger code. With the Listen gem this limitation has been removed, thus the CoffeeScript plugin triggers file changes twice.
I removed it on my master branch. Can you please give it a try before I release a new gem? You can do this easily by using my master branch by adding:
gem 'guard-coffeescript', :github => 'netzpirat/guard-coffeescript', :branch => 'master'
to your Gemfile. I'll release a new gem asap when it works fine.
So here's what I'm attempting to do. I'm building an ember.js application, with a java backend running on GAE.
I'm using handlebars, but I want them divided up into separate files, not just all pasted into the index.html.
Via the ember.js irc I was turned on to rake-pipeline along with minispade
Along with the web filters and a custom handlebars filter I started building the assetfile. I don't know Ruby, or gem files, etc.
So I'm trying to figure out the best way to be able to compile my coffeescript/handlebars files on the fly, minispade them, but keep the individual files accessible while in dev mode so I can debug them. What makes that hard is that the rake pipeline is running on a different port than GAE. So I'm not sure exactly how to handle this. Do I make my index file in GAE point to individual files at the 9292 port (rakep) during development, but in production mode point to the fully concatenated version? I'm not sure.
So I was attempting to do that here: https://gist.github.com/1495740 by having only one section that was triggered by the 'build' flag. Not even sure if that works that way.
I know there's a lot of confusion here. Apologies, like I said I'm not even remotely familiar with the Ruby style of doing things.
Since you're not a Ruby person, here are the most reliable steps for getting a stock OSX environment set up with rake pipeline:
Step 1: Install bundler
# on OSX, using built-in Ruby
$ sudo gem install bundler --pre
Step 2: Create a Gemfile
# inside your app directory
$ bundle init
# will create a file named Gemfile in the root
Step 3: Add rake-pipeline to the Gemfile
# inside the Gemfile
gem "rake-pipeline-web-filters"
Step 4: Install your gems
$ bundle install --binstubs
Step 5: Set up Assetfile
However you were already doing it...
Step 6: Run Rake::Pipeline
# to run the preview server
$ bin/rakep
# to build your assets
$ bin/rakep build
Rake::Pipeline.build is the method that evaluates an Assetfile. You can imagine that your entire Assetfile is wrapped inside a Rake::Pipeline.build {} block; you shouldn't ever need to write one inside an Assetfile.
Some of the filters in the docs are hypothetical, most of those docs were written before there were any filters at all. A CoffeeScript compiler has been recently added, though.
As to your main question, I'm not sure there's a clean way to do it with the current rakep implementation. An Assetfile is just Ruby, though, so it's possible to hack something together that should work. Here's how I would write yours:
require "json"
require "rake-pipeline-web-filters"
require "rake-pipeline-web-filters/helpers"
class HandlebarsFilter < Rake::Pipeline::Filter
def initialize(&block)
block ||= proc { |input| input.sub(/\.handlebars$/, '.js') }
super(&block)
end
def generate_output(inputs, output)
inputs.each do |input|
output.write "return Ember.Handlebars.compile(#{input.read.to_json})"
end
end
end
# process all js, css and html files in app/assets
input "assets"
# processed files should be outputted to public
output "public"
# process all coffee files
match "**/*.coffee" do
# compile all CoffeeScript files. the output file
# for the compilation should be the input name
# with the .coffee extension replaced with .js
coffee_script
# The coffee_script helper is exactly equivalent to:
# filter Rake::Pipeline::Web::Filters::CoffeeScriptCompiler
end
match "**/*.js" do
minispade
if ENV['RAKEP_ENV'] == "production"
concat "application.js"
else
concat
end
end
match "**/*.handlebars" do
filter HandlebarsFilter
minispade
concat "templates.js"
end
The if ENV['RAKEP_ENV'] bit reads an environment variable to decide whether to concatenate your JS to a single file.
So now you can run RAKEP_ENV="production" rakep build for a concatenated build, or just rakep build for a development build.
I'm a front-end developer transitioning from CSS to SASS. I've got Ruby and Compass installed on my local machine, and Compass "watch" is working beautifully.
However, I still end up with local CSS files which I have to manually FTP over to the server after every tiny change, to see what the change made. I would like to automate this.
I did find this thread which suggested using rsync, but I use Windows and I feel setting up rsync would be really difficult.
Is there some way to automate this using Ruby? The workflow I'm trying to get:
I save the SCSS file in VIM.
Compass Watch detects the change and compiles a new CSS file
Some magical tool detects the change to the CSS file, uploads to my server
I switch over to Chrome, hit F5, and see the change
I can do everything, except for step 3. Any ideas? (That don't involve Linux or Mac-only software?)
I disagree with Roy and Adam, When working with Wordpress themes, I develop on a remote dev server. I have a team of people adding content and other edits which update the database, it would be difficult for me as the developer to work locally 100% of the time. Their sql file getting updated with content wouldn't mesh super well after the fact with my sql file (you know theme option settings and what not).
I have avoided using SASS for this reason until now.
My optimal workflow would be to edit my scss file -> auto compile to css -> auto upload to the search (like a upload on save would) -> livereload takes place and I see edits (I can live without this last step).
I haven't attempted this yet but I found this link which seems to be the closest answer thus far.Using SASS with Remote Setup
Side note: Working locally is not always an optimal set up. It isn't an answer and this is about the 8th time I have seen this question with similar answers.
UPDATE: Just tried it without Codekit just sass --watch and it worked great!
ANOTHER UPDATE: I have further modified the way I handle sass and remote development.
I know use Sublime, Open my .scss and .css file at the same time. I then use SFTP (a package for sublime) to "Monitor File" which will look for changes to the file outside of directly editing it, I then open up terminal and sass my scss file, now every time I save it complies locally and then the compiled css file auto uploads to my server! Hope that makes sense, maybe I will make a video showing.
Since the question was asked in 2011 Compass has evolved and now provides callback functions to do exactly what was asked in the question:
For Step 3 you can use on_stylesheet_saved and on_sourcemap_saved callback functions to upload your *.css and *.css.map files to the production server.
Sample code how to do this can be found in this StackOverflow answer
I am in a similar position developing in sass (scss) and previewing on a remote dev site. When developing on Windows I use Sublime Text 2 to edit with the FTP-Sync plugin to automatically upload on save.
This plugin has a convenient option to flag folders watched for for file saves that trigger it to check a different path for further file changes to upload. So you can flag your scss folder, make changes to an scss file and save, which alerts ST2 to watch the css folder (you can build in a delay to allow enough time to compile) and upload any changed files.
After setup of the software and setup of FTP Sync for the given project, your actions amount to 1) edit and save, 2) wait a couple of seconds, 3) refresh browser to view changes. (If the site looks broken at this point you may need to increase the delay setting by a second and save the file again to trigger the process another time.)
I'm not sure how to accomplish this on other platforms for a remote site, though I wonder if Coda 2 has some options that might work for Mac OS users.
In my experience the best way is to work this way:
1. you have a site somewhere - and it doesn't really matters where and how complex this site is;
2. you have local SASS files and CSS generated from these SASS files;
3. install Fiddler2 (web proxy)
4. configure it to catch a request for CSS file and replace the response with your local CSS file.
So, as you can see, you can use local CSS file instead of remote one. So there is no need to upload CSS every time you're building the SASS.
Automatically Upload CSS After Sass is Compiled.
Install:
gem install net-ssh
gem install net-sftp
Add to config.rb:
`
require 'net/ssh'
require 'net/sftp'
http_path = "/"
css_dir = "/"
sass_dir = "/sass"
images_dir = "images"
javascripts_dir = "js"
output_style = :expanded
environment = :development
remote_theme_dir_absolute = '/path/to/where/you/want/to/save/the/file/on/remote/server'
sftp_host = 'your-host.com' # Can be an IP
sftp_user = 'your-user.com' # SFTP Username
sftp_pass = 'xxxxxxxxxxx' # SFTP Password
on_stylesheet_saved do |filename|
Net::SFTP.start( sftp_host, sftp_user , :password => sftp_pass) do |sftp|
puts sftp.upload! '/path/to/local/style.css', remote_theme_dir_absolute + '/' + 'style.css'
end
puts ">>>> Compass is polling for changes. Press Ctrl-C to Stop"
end
`
For ftp only:
require 'net/ftp'
http_path = "/"
css_dir = ".."
sass_dir = ".."
images_dir = "images"
javascripts_dir = "js"
project_type = :stand_alone
output_style = :compressed
line_comments = false
environment = :development
ftp_host = 'your-host.com' # Can be an IP
ftp_user = 'your-user' # FTP Username
ftp_pass = 'xxxxxxxxx' # FTP Password
TXT_FILE_OBJECT = File.new('/path/to/local/style.css')
on_stylesheet_saved do |filename|
Net::FTP.open( ftp_host, ftp_user , ftp_pass) do |ftp|
ftp.putbinaryfile(TXT_FILE_OBJECT, "/path/on/remote/server/#{File.basename(TXT_FILE_OBJECT)}")
end
puts ">>>> Compass is polling for changes. Press Ctrl-C to Stop"
end
Change dirs and file paths to yours...
The simplest solution would be to develop locally (as is a best practice). Run a web server on your computer (try XAMP for Windows) and all changes will be instantly visible, without having to upload. Only upload when you're done.
I just implemented Compass configuration for my Sinatra app but when I change the environment to :test or :production and modify my files like screen.sass or index.haml my changes are not reflected when I reload the page so I need to run my app again?
Is it normal? Is is just me?
This is how my app.rb file looks like:
require 'sinatra'
require 'haml'
require 'sass'
require 'compass'
require './helpers.rb'
configure do
set :environment, :test
Compass.configuration do |config|
settings.environment == :production ?
config.output_style = :compressed :
config.output_style = :nested
settings.environment == :development ?
config.line_comments = true :
config.line_comments = false
end
set :sass, Compass.sass_engine_options
end
before do
#js = 'javascript:;'
end
get '/scripts/jquery.js' do
# Downloads the latest jQuery 1.x version when needed. Requires to reload the page after done.
`curl "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" >> public/scripts/jquery.js`
end
get '/styles/:name.css' do
sass :"styles/#{params[:name]}"
end
get '/?' do
haml :index
end
get '/:page/?' do
haml params[:page].to_sym
end
Any idea?
Generally, if you make a change to a running Sinatra application, you have to restart the application, as the program has already been loaded to memory.
There are options for automatically detecting changes and restarting the application on the Sinatra FAQ.
Since Shotgun fix the issue partially (reloading the files for your at production, maybe try with Sinatra::Reloader which, IMHO, works better than Shotgun.
Maybe something like (not tested)
require "sinatra"
configure(:production) do |c|
require "sinatra/reloader"
c.also_reload "*.sass", "*.haml"
end
That being said, are you sure you do need this kind of behavior on a production/test environment for updating? Development env. should be (at least, for what I use it for) for this kind of hot testing.
I used to use sinatra::reloader
but I didn't like the huge dependencies incurred (as should we all be mindful how many gems get activated)
pistol ( at a tender age of ver 0.0.2) and I think does the required job nicely
I use shotgum gem for this.
gem install shotgun
then
shotgun app.rb
from within the app dir
this then reloads the app per request, rather than holding the whole thing in memory. you access the site on localhost:9393