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