3.LESS的自动编译

再次查看你的web文件包


|- view
|-|- index.html
|-node_modules
|-less 新增一个less文件夹[1]
|-|- common.less
|-css 用于存放编译完成的css文件
|- gulpfile.js


安装对应的gulp插件

这个时候请确认你已经把gulp安装完成了。

  1. 进入控制台,进入对应的项目地址

  2. 安装gulp-less插件

npm install gulp-less  //这个插件是用来编译less的…
  1. 安装gulp-concat插件
npm install gulp-concat  //这个插件是用来把less编译出来的css合并为一个css用的…
  1. 安装gulp-plumber插件
npm install gulp-plumber  //这个插件是用来处理管道崩溃问题的…
  1. 安装gulp-notify插件
npm install gulp-notify  //这个插件目的有两个,一个是显示报错信息,一个是报错后不终止当前gulp任务…

修改gulpfile.js文件

真正的自动化之路现在才开始

  1. 首先还是把需要用到的方法放到简单的(你喜欢的)名字变量里
//我们新添加的一套插件,分为两部分,一部分为了处理错误,一部分为了自动更新css文件(less编译)
var less = require('gulp-less');  //less编译
var concat = require('gulp-concat');  //文件合并
var plumber = require('gulp-plumber');  //处理管道崩溃问题
var notify = require('gulp-notify');  //报错与不中断当前任务
  1. 编写编译less的任务
//less编译
gulp.task('less',function(cb){
    return gulp.src('less/common.less')  //找到需要编译的less文件,所有less文件就写 less/*.less,
        .pipe(plumber({errorHandler: notify.onError('Error:<%= error.message %>;')}))  //如果less文件中有语法错误,用notify插件报错,用plumber保证任务不会停止
        .pipe(less())  //如果没错误,就编译less
        .pipe(concat('happyasyou.css'))  //把编译后的css合并为一个,名字是你开心就好,如果不想合并,就不写这一行
        .pipe(gulp.dest('css/'));  //把css文件放到css文件夹下
});
  1. 监听less文件
    此时我们已经写好了编译方法,那么每次当我们修改了less文件后都执行一次方法则违背了我们做自动化的初衷,那么我们需要一个监听方法,每当监听到less文件有变化则自动执行编译方法
gulp.task('watchLess',function(){
//监听所有less文件,如果有变化,则执行less编译方法
    gulp.watch(['*/*.less'],['less']);
});
  1. 把监听任务追加到启动服务器任务中
//第一种方法:将监听任务写进'woyaofuwuqi'任务中
//不推荐
gulp.task('woyaofuwuqi', function () {
    //任务名称不要有空格
    connect.server({
        liverload: true,port:9000 //端口号
    });
    gulp.watch(['*/*.html'],['qinghuancun']);
    gulp.watch(['*/*.less'],['less']);
});
/***********************************************************/
//第二种方法:新建一个任务列表,把监听任务与服务器任务都放在列表中
//推荐
gulp.task('taskList', ['woyaofuwuqi','watchHtml','watchLess']);
//修改默认任务,按照顺序做了的话,其实这次就不用改了。
gulp.task('default', function() {
    // 测试一下
    console.log('this is a new test page.');
    //gulp.start('woyaofuwuqi');
    gulp.start('taskList');  //执行任务列表
});
  1. 查看你的成果
    我们来写一点less内容在common.less里面
body{
    color:#f0f;//瞎眼粉
    background-color:#abc000; //屎黄色
    /*这俩颜色真的丑爆了!*/
}

在命令行中进入你的项目文件夹,输入gulp,打开你的项目文件夹,查看css目录下是否生成了对应的happyasyou.css文件,实时修改common.less文件,happyasyou.css文件会实时更新。


最后文件包的地址放这里了。


  1. 在本文集中,我就以less为例讲解如何自动编译了,原因是因为我只会less,不会sass/scss。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容