gulp-ruby-sass与gulp-sass_html/css_WEB-ITnose

I have been working in js since graduation. I have never written css, and my understanding of css is still at the level of self-study in school. My basic skills are too poor, so I have recently started to study in depth.

I learned that sass and less are more popular, so I decided to choose one. I won’t discuss the pros and cons of the two. I chose sass because it is closer to ruby.

Usually when writing sass, it is necessary to save and compile, but recently I have been using visual studio code to develop. This editor is not mature enough and does not support the function of compiling sass. I can only do it myself. Let's write a script and do it.

There is nothing to say about using gulp to do this work. I searched on npm and found gulp-ruby-sass because the ruby ​​environment is installed on the machine. The next script is that the installation is smooth and the use is very cool.

var gulp = require('gulp');var sass = require('gulp-ruby-sass');var group = require('gulp-group-files');var sassFiles = {    "xxx" : {        src: "./xxx/styles/sass/index.scss",        dest: "./xxx/styles/"    }};gulp.task('sass:compile',function (){    return group(sassFiles,function (key,fileset){        return sass(fileset.src)            .on('error', function (err) {                console.error('compile sass file error: %s', err.message);            })            .pipe(gulp.dest(fileset.dest));    })();});gulp.task('sass:watch',function (){    gulp.watch('**/*.scss',['sass:compile'])});gulp.task('default',['sass:watch']);

The code looks very nice, there is no problem, I am a little complacent. However, I encountered such a strange thing today, which is the reason for writing this article.

A problem occurred when I added an item to the projects that needed to be built. If talk is cheap, just show u the code.

var gulp = require('gulp');var sass = require('gulp-ruby-sass');var group = require('gulp-group-files');var sassFiles = {    "xxx" : {        src: "./xxx/styles/sass/index.scss",        dest: "./xxx/styles/"    },    "yyy" : {        src: "./yyy/styles/sass/index.scss",        dest: "./yyy/styles/"    }};gulp.task('sass:compile',function (){    return group(sassFiles,function (key,fileset){        return sass(fileset.src)            .on('error', function (err) {                console.error('compile sass file error: %s', err.message);            })            .pipe(gulp.dest(fileset.dest));    })();});gulp.task('sass:watch',function (){    gulp.watch('**/*.scss',['sass:compile'])});gulp.task('default',['sass:watch']);

Compared with the above, there is just one more thing that needs to be compiled. It doesn't look like a problem, but... The content of xxx/styles/index.css generated by compilation is actually yyy/styles/index.css, and sometimes the other way around.

I once suspected that there was a problem with my code. I changed it several times, but the problem remained the same. I have no choice but to look at the gulp-ruby-sass source code. I have a general understanding of the principle of this plug-in, as follows:

Create a temporary directory to store the css files generated by compilation;

Call the sass command to compile and generate The css file is first placed in the temporary directory;

reads the content of the css file into a stream and pipes it to gulp.dest defined in the gulp task. This completes the compilation and compilation of the scss file. Generation of css files;

Delete temporary directories and temporary files

The cause of the problem is the deletion of temporary files and directories in step 4, continuously When compiling multiple files, only a temporary directory is generated. After the first file is compiled successfully, the temporary directory is deleted, and subsequent file readings will cause errors. Depending on how long the operation takes, the following situations may occur:

Only one of the two files is compiled successfully

The content of the two files is the same (if the file name Same)

The file content does not match
...

After learning about the execution process of gulp-ruby-sass, I decided to abandon it. The reason is For the problems listed above, I don’t want to change my code.

Continuing to search on npm, I found gulp-sass.

npm install --save-dev gulp-sass. After waiting, npm reported an error.

wtf!!! Well, just think of it as a blessing in disguise. As can be seen from npm-debug.log, gulp-sass relies on the node-sass library. When installing the node-sass library, you need to execute a script, and if something goes wrong during the process, you can try installing it as an administrator.

Install again as administrator, this time it is successful, and then change gulpfile.js

var gulp = require('gulp');var sass = require('gulp-sass');var group = require('gulp-group-files');var sassFiles = {    "xxx" : {        src: "./xxx/styles/sass/index.scss",        dest: "./xxx/styles/"    },    "yyy" : {        src: "./yyy/styles/sass/index.scss",        dest: "./yyy/styles/"    }};gulp.task('sass:compile',function (){    return group(sassFiles,function (key,fileset){        return gulp.src(fileset.src)            .pipe(sass().on('error', sass.logError))            .pipe(gulp.dest(fileset.dest));    })();});gulp.task('sass:watch',function (){    gulp.watch('**/*.scss',['sass:compile'])});gulp.task('default',['sass:watch']);

By looking at the dependencies and part of the source code, you can find that gulp-ruby-sass and gulp The difference between -sass lies in the different compilers and different compilation processes.

• gulp-ruby-sass is a call to sass, so a ruby ​​environment is required, and temporary directories and temporary files need to be generated

• gulp-sass is a call to For node-sass, it is enough to have a node.js environment. The compilation process does not require temporary directories and files, and is directly converted through the buffer content.

After fixing this problem, I can use it happily and I can continue to learn css.