I've set up gulp and sass file compiler. Below is the contents of the gulpfile.js:
const sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('src/assets/scss/**/*')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('src/assets/css'))
});
My folder structure is:
src/
assets/
scss/
theme.scss <!-- main file -->
components/
_.scss <!-- extra files -->
What I want is to basically compile theme.scss into theme.css. However, I also get the /components folder copied inside the src/assets/css folder (though empty). Why is this happening?
I suspect gulp.src('src/assets/scss/**/*') might be the issue.
Try changing this to gulp.src('src/assets/scss/**/*.scss')
Related
I am new to gulp plugins and am trying to get sourcemaps to work
file structure
css/
sass/
theme/
_some-style.scss
_some-style-2.scss
_some-style-3.scss
style.scss
style.css
style.css.map
In my style.scss file I have
#import "theme/some-style";
#import "theme/some-style-2";
#import "theme/some-style-3";
great so I am only getting, _some-style-3.scss to appear in my dev tools when I inspect. I know I have a path issue here but not sure how to fix it.
Gulp file:
gulp.task('sass', function () {
return gulp.src(css/sass/theme/**/*.scss)
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest(css));
});
Your input is a bit confusing as you have different paths in your file structure, your import statements, and your gulp file. I'll base my answer on the path you provided in the file structure.
Your file structure says "theme" is directly under "sass", so your #import statement should be #import "theme/_various-scss-file.scss"
You need to specify the scss file in gulp.src not just the path, for example gulp.src('css/sass/style.scss'). And output path, according to your file structure and assume your gulp file is in the same folder as the css folder, should be gulp.dest('css').
Figured it out. Unrelated to paths. I didn't include that I was also compressing my scss first and that is interfering with the sourcemapping
I have been working on a website and used Gulp to compile my scss files. However, the main.scss file quickly gained in the number of lines and I decided to split it in different files and then import into a single one which will be compiled to css.
here is the structure of my project (other folders, such as /js are omitted)
- css
- sass
- helpers
_variables.scss
main.scss
I use the following line to import _variables.scss in my main.scss
#import 'helpers/_variables.scss';
this is my gulp task:
gulp.task('sass',function(){
return gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('css'))
});
When I launch the task, here what CLI outputs:
[17:13:04] Starting 'sass'...
Error in plugin 'sass'
Message:
sass\main.scss
undefined
I am using a css file that I import through npm. Respectively it is saved in my "/node_modules" directory.
I want to compile this file with my other scss files with elixir and am searching for a way, how to include it properly.
The options I could do is:
Rename the file from file.css to file.scss and import it in my app.scss
Copy the file.css file to my "resources/assets/" directory, rename it to scss and include it in my sass compilation like this:
Now I want to know, if there is a way to reference the file from the "node_modules" directory, without touching the file, because I want other people who download the project and use "composer install" and "npm install" to be up and running.
Or is the most common way to handle this, just to copy every required file from my "node_modules" directory to my resources/assets folder? Seems odd, since the included bootstrap file of the laravel framework is added just through an scss import in the app.scss file.
Now I want the same, but scss files can't import css files, which I have in my case, which would require for me to just rename it, which would not work out of the box on any other environment, since the "node_modules" directory is not included in version control.
Any recommendations, on what the best way is to compile css files in my "node_modules" directory?
If you look at the Elixir documentation you will notice there are many handy functions you can use. One of them is the mix.copy() function (you can copy single file or whole directory, for example whole jquery folder).
elixir(function(mix) {
mix.copy('node_modules/blabla/file.scss', 'resources/assets/sass/file.scss');
mix.sass(['file.scss', 'app.scss']);
});
This way each time you call gulp it will first copy the scss file from node_modules dir and then will compile sass.
Just add a dot before file path.
mix.scripts([
'./node_modules/autosize/src/autosize.js',
'./bower_components/jquery-tokenize/jquery.tokenize.js'
], 'public/js/app.js');
var elixir = require('laravel-elixir');
var path = require('path');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
function node_modules(filename) {
return path.join('../../../node_modules/', filename);
}
elixir(function (mix) {
var base = [
node_modules('bootstrap-sass/assets/javascripts/bootstrap/tooltip.js'),
node_modules('bootstrap-sass/assets/javascripts/bootstrap/collapse.js')
];
});
i'm using Laravel 5.1, which ships with laravel elixir - a wrapper for gulp.
My gulpfile.js looks like this:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less('app.less');
});
And app.less looks like this:
#import "../bootstrap/less/bootstrap.less";
#import "variables";
I'm running gulp watch from the command line, but the problem is that it only reacts when changes are made to app.less and not the imported files (e.g. bootstrap.less).
How can I enable gulp watch to watch imported files also?
Thanks
Turns out that because ../bootstrap/less/bootstrap.less is above the root folder being watched, then it is not watched, despite it being included.
gulp watch watches all assets in the folder, it doesn't read the less files for includes.
I try to run a gulp task to compile my sass project but since I create subfolder app/assets/ and put my sources files into it, I have a issue. Before when sass and css folder was in the same directory than my gulpfile it was running perfectly. And if I run a compass watch command on my base directory I have no issue, this is only with gulp-compass.
The output :
Devnco: /Users/Devnco/Web/maquette ->gulp sass
[gulp] Using gulpfile ~/Web/maquette/gulpfile.js
[gulp] Starting 'sass'...
[gulp] Finished 'sass' after 6.12 ms
[gulp] You must compile individual stylesheets from the project directory.
[gulp] Plumber found unhandled error: [gulp] Error in plugin 'gulp-compass': Compass failed
[gulp] You must compile individual stylesheets from the project directory.
[gulp] Plumber found unhandled error: [gulp] Error in plugin 'gulp-compass': Compass failed
[gulp] You must compile individual stylesheets from the project directory.
[gulp] Plumber found unhandled error: [gulp] Error in plugin 'gulp-compass': Compass failed
My gulpfile.js :
var paths = {
css: './app/assets/css',
sass: './app/assets/sass/*.scss',
js: './app/assets/js',
images: './app/assets/images'
}
gulp.task('sass',function(){
gulp.src(paths.sass)
.pipe(plumber())
.pipe(compass({
css: paths.css,
sass: paths.sass
}))
.pipe(gulp.dest(paths.css))
.pipe(minifyCss())
.pipe(rename({ extname: '.min.css'}))
.pipe(gulp.dest(paths.css));
});
My working directory :
gulpfile.js
app/
assets/
fonts/
images/
sass/
css/
pages/
etc…
And my package.json with the versions that I use (lastest)
"devDependencies": {
"gulp": "^3.6.2",
"gulp-compass": "^1.1.9",
"gulp-concat": "^2.2.0",
"gulp-minify-css": "^0.3.4",
"gulp-plumber": "^0.6.2",
"gulp-rename": "^1.2.0"
}
I made some searches but not still not found where is the problem.
Thanks in advance.
I use this to compile my compass file and it works fine, it comes right from the gulp-compass docs
if you are not using config.rb
var compass = require('gulp-compass'),
path = require('path');
gulp.task('compass', function() {
gulp.src('./src/*.scss')
.pipe(compass({
project: path.join(__dirname, 'assets'),
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest('app/assets/temp'));
});
if you are using config.rb
var compass = require('gulp-compass');
gulp.task('compass', function() {
gulp.src('./src/*.scss')
.pipe(compass({
config_file: './config.rb',
css: 'stylesheets',
sass: 'sass'
}))
.pipe(gulp.dest('app/assets/temp'));
});
I was having this problem tonight as well. I fixed it by changing my config.rb path. Try
.pipe(compass({
config_file: './config.rb',
css: paths.css,
sass: paths.sass
}))
If you don't have / want to use a config.rb I believe you have to set the project root like in the "Load config without config.rb" section of https://www.npmjs.org/package/gulp-compass
I was having this issue as well, I found that the project path needs to point to the folder that contains the folder with the css, scss. For instance:
app /
- src /
- css /
- sass /
given the above structure, your config should look like:
project: "app/src",
css: "css",
sass: "sass"
I got the error when my project path was one level higher, making my css property look like: "src/css"