gulp编译scss,less,自动监听

1.安装ruby

2.配置环境变量

   电脑右键→属性→高级系统设置→环境变量→系统变量path,,,ruby路劲到bin;

3.安装sass

可以在项目中安装,

gem install sass

4.

    sass = require('gulp-ruby-sass'),
    gulp.task('sass', function() {
    return sass('scss/*.scss')
        .on('error', function(err) {
            console.error('Error!', err.message);
        })
        .pipe(gulp.dest('public/css'))
});

5.设置自动监听:

gulp.task('auto', function() {
// 监听文件修改,当文件被修改则执行
gulp.watch('scss/*.scss', ['sass'])
});

 6.设置默认,gulp时运行的模块

gulp.task('default',function() {
gulp.start('minifycss', 'minifyjs','sass','auto');
});
或者
//gulp.task('default', ['sass', 'auto'])
=========================================
编译less
1.安装less
npm install gulp-less --save-dev
2.
gulp.task('testless', function () {
gulp.src('less/index.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('public')); //
});
====
//监听gulp.watch
gulp.task('auto', function() {
// 监听文件修改,当文件被修改则执行
gulp.watch('scss/*.scss', ['sass'])
gulp.watch('less/index.less', ['testless'])

});
//
gulp.task('default', ['sass', 'auto'])
cmd中输入gulp即可执行sass和auto任务


原文地址:https://www.cnblogs.com/lichaoqing/p/5678017.html