How to install node-sass/gulp-sass on Ubuntu 14.04+ or Linux Mint 17+?

I'm trying to switch from gulp-ruby-sass to node-sass which is based on libsass a C implementation faster than the classic Ruby version.

So far I've install the node packages:

Node package

cd /path/to/project
npm install --save-dev node-sass gulp-sass

Gulpfile

I replaced the requirement as follow:

//sass = require('gulp-ruby-sass'),
sass = require('gulp-sass'),

Libsass

Then I went to lo for a libsass package, but none is available currently.

So I wonder if anyone as a bash script to build it as current instructions are unclear ?

Solution 1:

I documented my research as a bash script as a gist based on the official doc

Compiling and Installing libsass and sassc

Install dependencies

apt-get install automake libtool 

Fetch sources

git clone https://github.com/sass/libsass.git
git clone https://github.com/sass/sassc.git libsass/sassc

Create configure script

cd libsass
autoreconf --force --install
cd ..

Create custom makefiles for shared library

For more info read: Difference between static and shared libraries? before installing libsass.

cd libsass
autoreconf --force --install
./configure \
  --disable-tests \
  --enable-shared \
  --prefix=/usr 
cd ..

Build the library

make -C libsass -j5

Install the library

sudo make -C libsass -j5 install

Testing

Only node-sass

time node-sass /path/to/main.scss 

Succeed with

Rendering Complete, saving .css file...
Wrote CSS to /mnt/data/projects/EVRPA/evrpa/web/main.css
node-sass ../web/styles/main.scss  0.42s user 0.03s system 95% cpu 0.471 total

Gulp with ruby-sass

[17:48:21] Using gulpfile /mnt/data/projects/EVRPA/evrpa/web/gulpfile.js
[17:48:21] Starting 'css'...
[17:48:21] gulp-ruby-sass: directory
[17:48:23] gulp-ruby-sass: overwrite main.css
[17:48:24] Finished 'css' after 2.9 s
gulp css  4.60s user 0.35s system 46% cpu 10.605 total

Gulp with node-sass

time gulp css
[17:47:59] Using gulpfile /mnt/data/projects/EVRPA/evrpa/web/gulpfile.js
[17:47:59] Starting 'css'...
[17:48:00] Finished 'css' after 1.1 s
gulp css  2.99s user 0.20s system 100% cpu 3.164 total

Conclusion

My tests are no benchmark and have little value but node-sass seems to be 3-5x faster than ruby-sass.

Solution 2:

The above is not working anymore with the Ubuntu 18.04

I ended up with the following:

git clone https://github.com/sass/libsass.git ~/libsass
echo "export SASS_LIBSASS_PATH=~/libsass" >> ~/.bashrc
source ~/.bashrc
git clone https://github.com/sass/sassc.git ~/sassc
cd ~/sassc
make
echo "export PATH=$PATH:~/sassc/bin/" >> ~/.bashrc
source ~/.bashrc
sassc -v

Based on https://github.com/sass/sassc/blob/master/docs/building/unix-instructions.md