zoukankan      html  css  js  c++  java
  • 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任务


  • 相关阅读:
    0111. Minimum Depth of Binary Tree (E)
    0735. Asteroid Collision (M)
    0133. Clone Graph (M)
    1007. Minimum Domino Rotations For Equal Row (M)
    2018-8-10-win10-uwp-关联文件
    2018-2-13-win10-uwp-手动锁Bitlocker
    2018-2-13-win10-uwp-切换主题
    jquery开关灯
    jquery隔行变色
    jquery体验
  • 原文地址:https://www.cnblogs.com/lichaoqing/p/5678017.html
Copyright © 2011-2022 走看看