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任务


  • 相关阅读:
    鼠标拖动DIV移动
    JS中事件&对象
    响应式与弹性布局
    JS中的变量和输入输出
    JS中的运算符&JS中的分支结构
    HTML基本标签
    CSS基础语法
    JS中循环结构&函数
    String 二
    StringBuffer
  • 原文地址:https://www.cnblogs.com/lichaoqing/p/5678017.html
Copyright © 2011-2022 走看看