I just studied gulp and have some problems using it
I have this structure
dist
|css
|main.css
|index.html
|images
|img.png
src
|css
|scss
|_framework.scss
|_variables.scss
|main.scss
the result structure I want is
dist
|css
|assests
|framework.css
|main.css
|index.html
|images
|img.png
src
|css
|scss
|_framework.scss
|_variables.scss
|main.scss
I've tried to seperate compiling of two files with 2 different tasks like "sass" and "sass-assests" task with different src and dist but it didn't work and I guess it's not the appropriate way to do so
Related
I'm trying to compile some .scss files into css using gulp. gulpfile.js:
var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("sass",
function() {
return gulp.src("app/assets/sass/*.scss")
.pipe(sass({
includePaths: [
"govuk_modules/govuk_frontend_toolkit/stylesheets/",
"govuk_modules/govuk_template/assets/stylesheet/",
"govuk_modules/govuk-elements-sass/"
]
}).pipe(gulp.dest("./wwwroot/stylesheets/")));
});
I'm using Visual Studio 2017 and when I run the sass task in task explorer, I get the expected files output into the destination folder, however, they are .scss files and not the expected .css files.
There are some 20+ files in total in the paths, and these do get compiled in to 4 files but like I say, are .scss not css.
Any ideas?
OK, so I've found the problem. One of the SCSS files is referencing a path to another file which I've misspelled the path to!
Corrected and working now
There's a problem with the closing of your first pipe, you should close it before starting the pipe for gulp.dest.
By doing so the files should be compiled to css and not scss.
.pipe(sass({
includePaths: [
"govuk_modules/govuk_frontend_toolkit/stylesheets/",
"govuk_modules/govuk_template/assets/stylesheet/",
"govuk_modules/govuk-elements-sass/"
]
})).pipe(gulp.dest("./wwwroot/stylesheets/"));
Right now, I am using Gulp for a project which is basically a CSS framework. The way I am doing it right now is, I #import all the other .less files in a single app.less and then pass it to the Gulp task:
// Compile
gulp.task("compile", function() {
return gulp
.src("source/app.less")
.pipe(less())
.pipe(concat("framework.edge.css"))
.pipe(gulp.dest("./dist"))
.pipe(
autoprefixer({
browsers: ["last 4 versions"],
cascade: false
})
)
.pipe(concat("framework.css"))
.pipe(gulp.dest("./dist"))
.pipe(sourcemaps.init())
.pipe(
uglify({
maxLineLength: 80,
UglyComments: false
})
)
.pipe(concat("framework.min.css"))
.pipe(sourcemaps.write("./"))
.pipe(gulp.dest("./dist"));
});
This works totally as expected. The stylesheets are first compiled and the exported as app.edge.css, then it is passed through autoprefixer, exporting framework.css and then the minification process.
The problem is, now I want to export each stylesheet as a separate module, such as
grids.css
scaffolding.css
and so on...
How can I achieve this? I am actually not getting what logic to apply.
Use globbing
If a gulp tasks's src is x/**/*.less, the task will process all LESS files in x or any subfolder of x and will output each file separately in the dest, preserving the src's file structure.
To exclude a file or files, use !....
Learn the globbing rules in the Glob Primer, and test your pattern with the Glob online tester
Depending on your needs, you might want two tasks, one for outputting individual files and one for building the full framework.css.
I have my Gulp file set up:
elixir(function(mix) {
mix.sass('app.scss').sass('admin.scss');
});
Which in my eyes should take both scss files and compile them into the public css folder.
However, it just creates one app.css file and doesn't create the admin.css file.
My terminal shows:
[23:01:43] Running Sass: resources/assets/sass/app.scss
[23:01:44] Running Sass: resources/assets/sass/admin.scss
[23:01:44] Finished 'watch' after 315 ms
[23:01:44] gulp-notify: [Laravel Elixir] Sass Compiled!
[23:01:45] gulp-notify: [Laravel Elixir] Sass Compiled!
So whats happening with the admin.scss file?
To do this you have to specify the output folder for each file (and also restart gulp / gulp watch)
elixir(function(mix) {
mix
.sass('app.scss', './public/css/app.css')
.sass('admin.scss', './public/css/admin.css');
});
Once again, people at Larachat have pointed me in the right direction, so I thought I put this info here.
Turns out it's pretty easy, and it's documented: http://laravel.com/docs/5.1/elixir#sass
Just put the files in an array instead of calling sass two times, like this:
mix.sass(['app.scss', 'admin.scss'], 'public/css')
Here is the thing. I have following structure of my LESS files:
/less/root.less
/less/includes1/*.less (a lot of less files)
/less/includes2/*.less (a lot of less files)
I am using gulp to compile my LESS files. Source:
gulp.task('less', function () {
var combined = combiner.obj([
gulp.src('./less/**/*.less'),
less(),
gulp.dest('./www/dist/screen.css')
]);
// any errors in the above streams will get caught by this listener, instead of being thrown:
combined.on('error', console.error.bind(console));
return combined;
});
The problem is in the specified path. I understand this path ./less/**/*.less like this: Recursively go through all folders and compile all files that ends .less. Problem is that compiler wants to compile each file one by one and doesnt know that all files are included to my source.less. It doesnt look for root files and doesnt know what files are included parts and what are root files.
How do I tell LESS parser which files are root and which files are to be imported. In SASS it is specified via underscore in file name like this: _includedPart.scss.
Well you can use https://github.com/robrich/gulp-ignore. See: How can I use a glob to ignore files that start with an underscore?
var condition = '_*.less'; //exclude condition
gulp.src('content/**/*.less')
.pipe(gulpIgnore.exclude(condition))
In many situations you all your Less code into a single CSS file. Your main file(s) contain #import directive which point all other required Less files.
how to exclude certain files from a directory from watched. for eg I have a stylesheets folder I am watching for *.css and create a *.min.css using cssmin. But it keeps going in a loop as the folder watched has a new/changed *.min.css(ending in css).
'stylesheet-css':
files: ['public/stylesheets/*.css']
tasks:['cssmin:stylesheet-css']
I tried couple of things..
'stylesheet-css':
files: [ '!(public/stylesheets/*.min.css)'] # any thing other than .min.css
tasks:['cssmin:stylesheet-css']
doesn't seem to work
You need to specify the files you want, then the files you don't want (both sets), so something like:
'stylesheet-css':
files: ['public/stylesheets/*.css', '!public/stylesheets/*.min.css']
tasks:['cssmin:stylesheet-css']
For reference, see Grunt globbing patterns.