That's how I used Gulp-sass in the project.

Always wanted to use sass, but lazy cancer has been sick. While the recent things are not many, so the configuration file written well, after all, it is able to improve the efficiency of things, early treatment good early use.

Because the project is a bit large, the style file is many. If all refactoring is a very laborious thing, and accidentally changed the file cover, the online page is likely to be affected.

So consider repeatedly, the old project continues to maintain normal, no longer use sass reconstruction. There are new requirements to write with sass, so that it does not affect the online page, but also to take over the new colleagues can quickly get started.

The new directory structure is like this:

Wxstyle is the total directory gulpfile.js存放在根目录 with, separate the PC end and the mobile side separately. ( because the use of sass, so currently only the CSS file classification, IMG and JS not to share here ) SCSS is the file compiled before the directory, release is the file compiled after the directory.

Now that the catalog has been built, it's time to write the configuration file.

Before this need to install the Gulp and Gulp-sass plug-ins, gulp method of use: http://www.gulpjs.com.cn/docs/getting-started/

It is important to note that you create a file named under the project root directory gulpfile.js :

' Use strict '; varGulp = require (' Gulp ')), Gulpscss= Require (' Gulp-sass '); Gulpminifycss= Require (' Gulp-minify-css ');//Store directory after compilationvarPath ={scss:' wxgulp/mobile/v1/css/'}//listening to scss style filesGulp.task (' Scss-monitor ',function() {gulp.src (path.scss+ ' Common/scss/*.scss '). Pipe (Gulpscss (). On (' Error ', Gulpscss.logerror)) . Pipe (Gulp.dest (path.scss+ ' common ') ); GULP.SRC (Path.scss+ ' Topic/scss/*.scss '). Pipe (Gulpscss (). On (' Error ', Gulpscss.logerror)) . Pipe (Gulp.dest (path.scss+ ' topic ') }); Gulp.task (' Scss-watch ',function() {Gulp.watch (' Wxgulp/**/*.scss ', [' Scss-monitor ']);});//the following tasks are performed by default:Gulp.task (' Default ', [' scss-watch ']);

At this point you can enter ' Gulp ' on the command line and run the gulp. The above code about the use of gulp is unknown, because there are many introductions on the internet, or look at the installation of the gulp inside the Readme file is good, the usage in the introduction is very detailed.

Well, as expected, the compiled file is also stored in the specified directory.

Wait, it feels a little bit right ...

If the classification is relatively thin, the directory is more than the case, the configuration file configuration address is not to be written separately, and need to continue to increase the line? This is more difficult to maintain, as follows:

Such a practice is not very scientific, it has to be changed ...

Considering that the compiled CSS does not often look, can be used with the picture or JS layout to the line directly, so you can consider putting it under the large directory.

Unlike the first one, the pre-and post-compilation files are stored separately in two large directories. Wxgulp storage is the pre-compilation files, release is stored in the compiled file. In this way, the configuration directory is much simpler:

Monitor all the scss files in the Wxgulp directory and store them in the release directory directly after compilation. No changes to the configuration file are required for any additional file directories.

That's how I used Gulp-sass in the project.