Compiling sass and less with gulp

Gulp is a stream-based automated build tool that can help me implement many functions, such as code compilation, compression, and more.
Website: https://www.gulpjs.com.cn/

A simple personal understanding of gulp

The following is just a detailed description of using gulp to compile sass and less functions

1. Prerequisites to install node, Ruby

2. Node installation http://nodejs.cn/

3. Ruby installation https://rubyinstaller.org/downloads/

4. sass installation

gem install sass
gem install compass

Compass is a tool library of Sass. Sass itself is just a compiler. On its basis, Compass encapsulates a series of useful modules and templates to supplement the functions of Sass. The relationship between them is a bit like the relationship between Javascript and jQuery

5. Gulp installation

npm install gulp -g

6. npm init -yInitialize a package.json file using

{
  "name": "myweb",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": ""
}

7. Use npm install gulp –save-dev

npm install --save-dev gulpIf you want to write gulp into the dependencies of the project package.json file during installation, you can add --save-dev:

Description: --save: Save the configuration information to package.json,

At the same time --save: it is also the production environment of the project. After the project is released, things that are still depended on are saved in dependencies

For example: if you use jQuery, since it is still a dependency after publishing jQuery, it isdependencies

--save-dev: It is something that the project development environment depends on and is saved in devDependencies

For example: write sass code, if you want to compile it into css and publish it, then it gulp-sassis `devDependencies

8. Install the gulp-sass plugin to compile the sass file

 npm install gulp-sass --save-dev

9. Automatic refresh (when the code changes, it can help us refresh the page automatically)

To use the gulp-livereload plugin, install:npm install --save-dev gulp-livereload

To install the corresponding plug-in in Google Chromechrome liveReload

9. Create a new gulpfile.js to manage files

 // 获取gulp
var gulp = require('gulp');

//获取gulp-sass模块
var sass = require('gulp-sass');

//获取gulp-livereload模块（实现浏览器自动刷新）
var livereload = require('gulp-livereload');

// 给gulp设置任务，编译sass
// 在命令行输入 gulp sass 启动此任务
gulp.task('sass',function(){

    // 被编译文件的路径

    return gulp.src('./src/sass/*.scss')
    // return gulp.src('./src/sass/**/*.scss')

     // ** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了
    //使用数组的方式来匹配多种文件 gulp.src(['js/*.js','css/*.css','*.html'])
    // * 匹配文件路径中的0个或多个字符

     // **/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
    // 通过pipe管道，使用 sass (此处的sass是上面使用 var声明的 sass )来读取/src/**/*.scss文件

    .pipe(sass())

    //编译后文件输出的目录
    .pipe(gulp.dest('./dist/css'))

     // 使用livereload 方法实现浏览器自动刷新
    .pipe(livereload());

});

// 使用 gulp watch命令来监听scss文件变化，
gulp.task('watch', function() {
   livereload.listen(); //要在这里调用listen()方法
  // 监听文件修改
  gulp.watch('./src/sass/*.scss', ['sass']);

});


// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改
    gulp.watch('./src/sass/**/*.scss', ['sass'])
    /*gulp.watch(glob[, opts], tasks)
    glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
    opts 为一个可选的配置对象，通常不需要用到
    tasks 为文件变化后要执行的任务，为一个数组*/
});

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 sass 任务和 auto 任务
gulp.task('default', ['sass', 'auto'])

10. Install the gulp-less plugin to compile the less file

 npm install gulp-less --save-dev

11. Create a new gulpfile.js to manage files

 // 获取gulp
var gulp = require('gulp');

//获取gulp-less模块
var less = require("gulp-less")
//编译less
//在命令行输入gulp less启动此任务
gulp.task('less',function(){
    //1.找到less文件
    gulp.src('./src/less/*.less')
    //2.编译为css
    .pipe(less())
    //3.另存为css
    .pipe(gulp.dest('./dist/css'))
})

//在命令行gulp auto启动此任务
gulp.task('auto',function(){
    //监听文件修改，当文件修改则执行less任务
    gulp.watch('./src/less/*.less',['less'])
})
//使用gulp.task('default')定义默认任务
//在命令行使用gulp启动less任务和auto任务
gulp.task('default',['less','auto'])

The configuration files can be merged together

gulp.task('auto',function(){
    //监听文件修改，当文件修改则执行less任务
    gulp.watch('./src/less/*.less',['less'])
    gulp.watch('./src/sass/**/*.scss',['scss'])
})
//使用gulp.task('default')定义默认任务
//在命令行使用gulp启动less任务和auto任务
gulp.task('default',['less','sass','auto'])