When I try to use the replace and watch attributes for the same file(s), I get an infinite loop, meaning that the watch notices the change that e.g. autoprefixer just made to the file and thus starts the command again and again.
Here is the command that I put into an NPM script or use on the command line:
postcss css/*.css -u autoprefixer --replace --watch
(or as shortform: postcss css/*.css -u autoprefixer -r -w)
It basically all works (autoprefixes are applied, the file is replaced and watched), the only problem is the infinite loop. So, is it possible to use --watch and --replace for the same file or directory?
Use the --poll option too:
postcss css/*.css -u autoprefixer --replace --watch --poll
The docs are sparse about it, but it works in v3.2.0 of postcss-cli.
Related
Context: I need to run a command every time Tailwind's just-in-time compiler ran a new build in watch mode. To be more specific, I need to rebuild Drupal's cache for the changes to take effect.
Unfortunately, watching for modifications of output.css with inotifywait doesn't work because the JIT compiler doesn't recreate output.css in all circumstances. For example, if you add the border-2 class for the first time, a new version of output.css is built. However, if you remove border-2 again, the compiler won't recreate output.css for legitimate reasons. See JIT compilation doesn't remove unused classes when the DOM changes · Issue #57 · tailwindlabs/tailwindcss-jit.
I also tried using tee and watching the output file with inotifywait without success. npx tailwindcss -i input.css -o output.css --watch | tee tailwind-built doesn't write to tailwind-built for reasons I don't get.
I found a solution based on tee finally.
Problem was that Tailwind's CLI at the time of writing uses console.error (see here) to report
Rebuilding...
Done in 33ms.
So npx tailwindcss -i input.css -o output.css --watch 2>&1 | tee tailwind-built (added 2>&1) and watching tailwind-built with inotifywait does the trick.
I was using SASS as CSS pre-processor for Drupal theme. Where in the command line if I use $ compass watch. It keep on watching the change in .scss file and apply to .css file.
Just I am trying Bootstrap theme and there I am using LESS CSS pre-processor, Where I have to use $ lessc less/style.less css/style.css every time to apply change.
What is the equivalent of $ compass watch for LESS.
You need to install less-watch-compiler:
npm install -g less-watch-compiler
Make sure you installed less globally:
npm install -g less
In Terminal, navigate to your working directory path and run the following command:
less-watch-compiler FOLDER_TO_WATCH FOLDER_TO_OUTPUT
What I want to do is simply have a tool that can watch and auto prefix my css. Previously I was using pleeease.io, it is very straightforward for beginners like me, after install it through npm, what I need to do is to create an option file(.pleeeaserc), then do
pleeease watch
Afterwards, I can focus on my css, every time I make change to my css file, it gets processed and output.
Unfortunately it seems the author has stopped maintaining it, when I do
npm install pleeease
on my new server I got lots of errors and the installation failed.
I guess it is time for me to learn how to directly use autoprefixer, which I believe pleeease integrates as one of its dependencies.
However, I find the learning curve is a little too much for me: To use autoprefixer, I need to learn PostCSS; and PostCSS usually runs with Grunt or Gulp; to use task runners, I need to know something about npm and node.js. I know these are all useful tools which can save lots of my time, with them I can do much more than just autoprefixing. I will make deep dive into them later but under my current pressure I really need some shortcut like pleeease to get autoprefixer up and running, without having to digest all the documents and articles about PostCSS. I hope I can do something like
[postcss|autoprefixer|something else] watch
under my scss folder and every time I make change to and save input.scss, a output.scss file will be generated.
So I have some questions, in part of my effort on learning PostCSS and/or getting autoprefixer work as easy as possible:
1) To clarify, what is the relationship between PostCSS and PostCSS-cli? Does the latter depend on or include the former?
2) And does installing the latter merely enable the ability to use postcss command in command-line interface?
3) I did npm install -g postcss-cli but I still can't use postcss command, what did I do wrong?
4) To watch file change and automatically compile, do I need to use task runners like Grunt or Gulp along with PostCSS?
5) What is the difference between npm install postcss and npm install grunt-postcss?
"What I want to do is simply have a tool that can watch and auto prefix my css."
Yes you can do this easily with gulp, which you can get up and running in minutes. There are plenty of "getting started" walkthroughs online. You don't really need to know anything about PostCSS to use autoprefixer. This task below will compile all your sass, run autoprefixer and output a corresponding CSS file anytime you save a .scss file:
gulpfile.js
var gulp = require('gulp'),
$ = require('gulp-load-plugins')();
gulp.task('watch', () => {
gulp.watch('src/**/*.scss', ['sass']);
});
gulp.task('sass', () => {
return gulp.src('src/**/*.scss')
.pipe($.sass())
.pipe($.autoprefixer())
.pipe(gulp.dest('dest'));
});
1) To clarify, what is the relationship between PostCSS and PostCSS-cli? Does the latter depend on or include the former?
The answer to question 5 partly answer this question to what postcss is used for. The other is intended to be ran from the command line. PostCSS-cli is a binary, the other is an NPM package written in Javascript.
2) And does installing the latter merely enable the ability to use postcss command in command-line interface?
Yes.
3) I did npm install -g postcss-cli but I still can't use postcss command, what did I do wrong?
It's better to install locally like so:
npm i postcss-cli --save-dev
Then you can use like so:
node_modules/postcss-cli/bin/postcss -c config.json
Or, add a script in package.json like so:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node_modules/postcss-cli/bin/postcss -c config.json",
"watch": "node_modules/postcss-cli/bin/postcss -c config.json -w",
"minify": "node_modules/postcss-cli/bin/postcss -c config-minify.json"
},
Note: Relative paths are not required in the scripts section. I put them in to show local usage of postcss-cli. You could simply use:
...
"build": "postcss -c config.json"
...
You can then run:
npm run build
4) To watch file change and automatically compile, do I need to use task runners like Grunt or Gulp along with PostCSS?
Nope. PostCSS-cli can do this:
node_modules/postcss-cli/bin/postcss -c config.json -w
Or, add as script to package.json as can be seen in my example above. Then you just run:
npm run watch
5) What is the difference between npm install postcss and npm install grunt-postcss?
The later is used for gulp, the former is used to build grunt-postcss, postcss-brunch etc.
To use autoprefixer with postcss-cli on the command line you do:
postcss --use autoprefixer --autoprefixer.browsers "> 5%" -o output.css input.css
This is listed in the docs and is pretty easy to follow.
How could I trace changes in whole directory containing many sass files ? I'm using the following command to watch changes in sass
file:
sass --watch style.scss:style.css
But how to watch changes in whole directory/folder containing many sass files.
Simply use the command sass --watch <input folder>:<output folder>, like this:
$ ls -l
css/ sass/
$ sass --watch sass:css
Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.
Expanding the answer by piouPiouM a little:
Output files will be created with the same names as input files except ending with .css.
<input folder> and <output folder> can be the same.
Both folders can be the present working directory, so the following is valid:
$ sass --watch .:.
Go to you terminal and get to you folder then wrote:
sass --watch .
this will watch all sass files and convert to css files with the same name.
also you can do it in this way:
sass --watch ~/user/youUser/workspace/project/styles/
I hope this can help you.
I ended up doing this without using Grunt or Sass-watch:
npm install -g watch
watch "sass assets/app.scss assets/dist/app.css" assets/css
if you are in your current folder then do the following to watch it.
F:\sass tutorial>sass --watch ./:./
Just in case someone faces with this issue in 2018:
sass Website refers to Ruby Sass that is been deprecated.
and as now (May 2018) if you install dart sass via npm , it does not support --watch command
What to do:
you need to install node-sass globaly , like:
npm install node-sass -g
and then restart the command line , then use this code:
node-sass --watch scss/styles.scss css/styles.css
to compile your scass files to css.
basically node-sass supports --watch command and we use that to compile our scss codes to regular css files.
and just in case you get an error like this at the first time that you save your .scss file:
{
"status": 3,
"message": "File to read not found or unreadable: yourdirectory/scss/styles.scss",
"formatted": "Internal Error: File to read not found or unreadable: yourdirectory/scss/styles.scss\n"
}
what you need to do is save it again, it will work correctly!
According to the information, you can use the next command line:
sass --watch .
Source: http://sassbreak.com/watch-your-sass/#what-does---watch-do
You can create one sass file which includes the rest of the files, and then just watch this file.
Alternately, look into Grunt and the very good grunt-contrib-compass plugin
You can set sass to watch all the .scss files(for my case i got several .scss files in src/static folder) to compile, but before install it globally:
npm i -g sass
then go to the project folder and type command below:
sass --watch $(pwd)/src/static
also you can wrap it in npm script in package.json, like
"scripts": {
"sass:watch": "sass --watch $(pwd)/src/static"
}
and run it by this command:
npm run sass:watch
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