I'm currently using the following gulp function that uses SassDoc^2.7.3 to automatically document all of my Scss code.
const sassdoc = require('sassdoc')
//...
function documentScss() {
var options = {
dest: './public/sassdoc',
verbose: true,
}
return src('./src/scss/**/*.scss').pipe(sassdoc(options))
}
Inside the directory ./public/sassdoc, an index.html file and an assets folder are created as it is Sassdoc's default behavior. I was looking for a configuration option, theme or library that would instead create a .json file with the same content. I just want to be able to use my Sassdoc documentation in other js modules, and I think that generating the documentation in a .json file during the build would be best.
Thank you :D
Instead of using a gulp function, I was able to do it using the sassdoc cli. The command sassdoc src/ --parse Will output all comments inside the src folder to the terminal. With a slight modification, you can turn that output into a .json file:
sassdoc src/ --parse > ./sassdoc.json
Related
How to use gulp-clean-css to write a new -min.css file instead of the default of overwriting the existing CSS source file?
Currently, I have this line which minifies the file. However, it overwrites the original with the minified version. I would like it to create a new file with the -min.css extension at the end of the original file basename.
src(filePath).pipe(minifyCSS()).pipe(dest('./css/'));
I know there is a gulp-copy in the npm repo I could use. I would like to know if there are any other ways to do it.
Thanks
I don't believe this is possible without installing any additional npm packages, though considering the nature of NodeJS, I don't think it would be considered unreasonable to require one.
One possible way to achieve this (without gulp-copy) would be with gulp-rename and the rename command:
gulp.src(config.css)
// Output the file before cleaning
.pipe(gulp.dest(config.css))
// Clean the file
.pipe(cleanCss())
// Rename with a .min suffix (e.g. app.css -> app.min.css)
.pipe(rename({ suffix: ".min" }))
// Output the minified CSS file
.pipe(gulp.dest(config.css));
This will produce two files - the unminified original .css file and the minified .min.css file.
I'm a newbie to Sass and try to create a folder structure which works with minimal effort when compiling. I want to create multiple files in each multiple directories which have the same name with the file (/.css) and my sass files are located in app/sass folder so that it's transferred with no effort.
I've done a research for the simple tricks of cd notation of any command line but later I understood that the notation of Sass can be different. I've looked for Gulp and Grunt and still couldn't find exactly anything on sending css files to multiple destinations which have the same name. I've searched Sass/CSS structures but I still cannot figure it out how to use a single CSS file for the entire project.
-app
-sass
-index.scss
-admin.scss
-public
-index
-index.css
-admin
-admin.css
sass --watch app/sass/*.scss:public/css/*/*.css
What should I write instead of * that functions as a parameter for everyone?
The Sass guide on their website: https://sass-lang.com/guide tells you to do it like this:
sass --watch app/sass:public/stylesheets
And this link [
sass watching multiple directories
] says you can specify more then one path to watch:
sass --watch path/to/sass1:path/to/css1 path/to/sass2:path/to/css2 path/to/sass3:path/to/css3
So you can watch multiple paths, but still have to specify each of them.
I have a list of SCSS partials organized by components that I am trying to compile individually with Gulp, but can't figure out how to do so.
Here is a partial list of files that I want to compile:
_header.scss
_button.scss
_navigation.scss
And I want to output these files in the same directory as
header.css
button.css
navigation.css
I am using gulp-sass in order to compile all of my SCSS files into a single file like so:
gulp.task('styles', function() {
return gulp
// Find all `.scss` files from the `stylesheets/` folder
.src('./src/stylesheets/**/*.scss')
// Run Sass on those files
.pipe(sass({
style: 'expanded',
}).on('error', sass.logError))
// Write the resulting CSS in the output folder
.pipe(gulp.dest('build/stylesheets'))
});
Is there a way to create a separate Gulp task that would compile and output each file in a directory individually instead of combining them into one file at the end?
Thanks in advance.
You need to rename the partial files remove the leading underscore. Sass normally wont generate the output file if the file name starts with _xxx.scss.
Documentation
The underscore lets Sass know that the file is only a partial file and
that it should not be generated into a CSS file.
You can rename the file to xxx.scss and still import into other files like partials.
I have some problems with creating a proper .map file.
I compile by this way:
lessc --source-map=styles.map styles.less styles.css
The problem is that the path to the sources files is a full local path. It looks like this (quote from the beginning of styles.map):
{"version":3,"sources":["C:/xampp/htdocs/Projects/TestSite/wp-content/themes/wordpress-bootstrap-master/bower_components/bootstrap/less/normalize.less"
...
After uploading to server, all the paths to source files are accepted in a wrong way.
If I replace all C:/xampp/htdocs/Projects/TestSite with an empty string, it becomes well.
What settings should I do to get a right .map file?
I tested --source-map-less-inline; it includes all of the Less files in to the sourcemap, so it goes well, but by this way the .map file becomes very big.
I have file stucture like this
client
stylesheet
main.import.styl
template
a
a.styl
b
b.styl
And I try to import main.import.styl in a.styl and b.styl like this
#import main.import
(also I try other options like /main.import, ./..., and more) in result I have failed to locate #import main.import.styl
But if I put a and b files in stylesheet all works fine
I use meteor stylus
My poblem in simple way:
files do not see each other in different folders
folder1
a.import.styl
folder2
b.styl
The correct syntax would be :
#import '{}/client/stylesheet/main.import.styl'
Please refer to the stylus package docs for additional information.