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.
Related
I'm trying to compile a set of scss files into a single css file. For example, here is my folder structure:
theme
- assets
- src
- sass
- config
- _grid-system.scss
- _variables.scss
- _client-styles.scss
- _typography.scss
- styles.scss
From the above, I'm looking to compile _client-styles.scss and _typography.scss into one css file. This new CSS file will sit in the same folder and will be called core.css (will sit under the sass folder).
I have gulpfile.js set up which compiles all .scss files into css in the same folder. But don't know how to approach this conversion as I want to ignore the styles.scss file.
Current gulpfile.js:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var paths = {
styles: {
src: 'modules/**/*.scss',
dest: 'modules'
}
}
function scss() {
return gulp.src(paths.styles.src)
.pipe(sass().on('error', sass.logError))
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {
scss();
gulp.watch(paths.styles.src, scss);
}
exports.watch = watch
What styles.scss looks like (for reference):
#import "config/**.scss";
#import "client-styles.scss";
#import "typography.scss";
How do I go about this? Compile the '_client-styles.scss' and '_typography.scss' file into 'core.css' that will sit under sass folder:
theme
- assets
- src
- sass
- config
- _grid-system.scss
- _variables.scss
- _client-styles.scss
- _typography.scss
- styles.scss
- core.css (new file here)
You can create a core.scss file where you will import all sass files in the subfolders like this:
// change the path accordingly
#import "./sass/**/*.scss";
Using gulp-sass-glob you can pipe it in your gulpfile.js this way:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var sassGlob = require("gulp-sass-glob");
var paths = {
styles: {
src: 'modules/**/*.scss',
dest: 'modules'
}
}
function scss() {
return gulp.src(paths.styles.src)
.pipe(sassGlob())
.pipe(sass().on('error', sass.logError))
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {
scss();
gulp.watch(paths.styles.src, scss);
}
exports.watch = watch
Another way to compile many SCSS files would be to use the many-to-many compilation mode on the dart sass cli tool.
In my project, SASS is being managed by NPM, so to achieve this you can do:
If sass is not already installed with NPM, npm install --save-dev sass to install sass as a dev dependency for your current project or npm install -g sass to install it globally on your system
npx sass some_path/scss_dir:some_other_path/css_output_dir to compile all the *.scss files in some_path/scss_dir and output them (with source maps) to some_other_path/css_output_dir
npx sass some_path/scss_dir:some_other_path/css_output_dir --watch will re-build the compiled CSS when any of the SCSS files are changed
I'm new in gulp and I have a problem with managing hosted fonts in my website.
Does anyone know how I should write gulp task, which creates #fontface in my style.css file? (I tried to use this npm package (https://www.npmjs.com/package/postcss-font-magician#hosted) but it didn't work!)
here is my gulp task (styles.js):
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
hexrgba = require('postcss-hexrgba'),
colorFunctions = require('postcss-color-function'),
fontMagician = require('postcss-font-magician')({
hosted: ['../../app/assets/fonts']
});
gulp.task('styles', function() {
return gulp.src('./app/assets/styles/styles.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, colorFunctions,
fontMagician, autoprefixer]))
.on('error', function(errorInfo) {
console.log(errorInfo.toString());
this.emit('end');
})
.pipe(gulp.dest('./app/temp/styles'));
});
here is my css code:
body {
font-family: 'parastoo';
}
and this is my source tree:
|--app
| |-- assets
| | |-- fonts
| | | |-- parastoo.woff
| | | |-- parastoo.woff2
| |-- index.html
|-- gulp
| |-- tasks
| | |-- styles.js
|-- gulpfile.js
|-- package.json
|-- webpack.config.js
Thank you very much.
This one has me scratching my head for sure. I have my project set up like so
.
├── app
| └── styles
| ├── foundation
| | └── foundatipn.scss
| └── app.scss
├── build
| └── styles
└ └── app.css
My gulp-sass task compiles the app.scss correct and places the final file in build.styles.
However, when the sass task is triggered by gulp watch it puts a css file in app/styles/. It still compiles the correct file to build/styles.
Relevant code below
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),
notify = require('gulp-notify'),
include = require('gulp-include'),
autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-ruby-sass'),
sourcemaps = require('gulp-sourcemaps'),
cssnano = require('gulp-cssnano'),
browserify = require('browserify'),
source = require('vinyl-source-stream');
var reload = browserSync.reload;
var dest = './build';
var src = './app';
gulp.task("sass", function(cb){
//Compile Foundation SCSS to CSS
var stream = sass('app/styles/app.scss',{
loadPath: ['app/styles/foundation'],
})
//.pipe(notify("Compiling SCSS, Autoprefixeing, Minifying and Creating Sourcemaps"))
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
}))
.pipe(cssnano())
.pipe(sourcemaps.write('/'))
.pipe(gulp.dest(dest + '/styles'))
.pipe(reload({stream: true}));
return stream;
});
gulp.task('watch', function(){
gulp.watch('app/**/*.html', ['markup']);
gulp.watch('app/styles/**/*.scss', ['sass']);
gulp.watch('app/scripts/**/*.js',['js']);
gulp.watch('app/images/**/*.png', ['images']);
});
depending on what version of gulp / gulp sass you are using it could be your "base".
Something about gulp using /**/ to set it's base for dest files/folders.
see this post:
how base option affects gulp.src & gulp.dest
More importantly this line:
If you want to avoid this you have to explicitly specify the base option:
gulp.src('some/path/**/js/*.js', {base:'.'})
.pipe(gulp.dest('output'));
I hope it helps.
I want to switch from less to sass so I installed gulp-sass with npm and modified my gulpfile to compile sass instead of less (nothing else changed). Sadly gulp doesn't compile my .scss file to css and after googling and trying all i could think of it still doesn't compile. Here are all the informations I can show you:
gulpfile.js
// GULP CONFIG
// REQUIRES
// general
var gulp = require('gulp');
// css
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var rename = require("gulp-rename");
// watch
var watch = require('gulp-watch');
// TASKS
// css
gulp.task('css', function() {
gulp.src('style.css') // get the 'all-import' css-file
// .pipe(sass({includePaths: ['./styles']}))
// .pipe(sass().on('error', sass.logError))
.pipe(sass()) // sass to css
.pipe(autoprefixer('last 2 version', { cascade: false })) // autoprefix
.pipe(minifycss()) // minify
.pipe(rename('style.min.css')) // rename to style.min.css
.pipe(gulp.dest('')); // output to root
});
// watch
gulp.task('watch', function() {
gulp.watch('styles/*', ['css']);
});
// RUN DEFAULT
gulp.task('default', ['watch']);
related Folders & Files
├── style.min.css
├── style.css (with #import styles/style.scss)
│ └── styles
│ ├── style.scss
terminal response:
starting gulp:
[10:19:14] Starting 'watch'...
[10:19:14] Finished 'watch' after 11 ms
[10:19:14] Starting 'default'...
[10:19:14] Finished 'default' after 20 μs
after saving style.scss
[10:19:20] Starting 'css'...
[10:19:20] Finished 'css' after 15 ms
style.scss (content on purpose of testing obviously)
$color: #99cc00;
body {
background-color: $color;
.sub {
color: $color;
}
}
style.min.css after running through gulp
$color:#9c0;body{background-color:$color;.sub{color:$color}
You are not telling gulp to watch for sass file. On this line:
gulp.src('style.css')
You are specifying a css file, not a scss file. Change it to :
gulp.src('style.scss') // update, s missing
Also, there is no output route specified. This line:
.pipe(gulp.dest(''));
Should contain your destiny route, and its currently empty.
So, for the root route, something like this should work:
.pipe(gulp.dest('./')); // or whatever route you want
Anyway, your file structure is a bit weird.
In my opinion, you should create different folders for sass files and compiled ones.
Hope this puts you on the right track.
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'
}
}
}