美文网首页移动技术
使用gulp搭建less编译环境

使用gulp搭建less编译环境

作者: 浪流儿 | 来源:发表于2017-11-21 22:09 被阅读0次

    一、首先要确定全局安装了gulp, gulp的全局安装命令

    npm install gulp -g

    二、在项目目录下执行以下命令,创建package.json文件:

     npm init

    三、依次执行下面的命令下载gulp依赖包和gulp-less以及gulp-autoprefixer工具:

      npm install gulp  -D

      npm install gulp-less  gulp-autoprefixer  -D

    四、在项目目录中创建一个gulpfile的js文件,js代码如下

    //1:引入所需要的模块

    var gulp  =require("gulp");

    var less  =require("gulp-less");

    //css前缀兼容

    var auto  =require("gulp-autoprefixer");

    //2:创建编译less任务,第一个参数为任务名称

    gulp.task("compileLess",function(){

           //找到项目中less文件夹中所有文件夹下的所有less文件

            gulp.src("./less/**/*.less")

                   //进行预编译处理,保持与引入的模块一致

                  .pipe(less())

                  .pipe(auto({

                         grid:true,

                        browsers:['last 2 version']

           }))

                  //编译后将less编译成的css文件保存到项目目录下的css文件夹中

                 .pipe(gulp.dest('./css'))

    })

    //到此,到项目目录下,在终端输入以下命令,就会在项目目录下生成一个css文件夹,并且在css文件夹中生成一个与预编译的less文件同名的css文件:

    执行命令:

    gulp compileLess

    //拓展:在最后添加以下代码,在终端直接输入:gulp 也可以达到相同效果。这个适用于编译多个不同类型的文件

    //第一个参数为要预编译的目标文件,第二个参数为数组,数组存储各个任务名

    gulp.task("watch:less",function(){

              gulp.watch('./less/**/*.less',['compileLess']);

    })

    //数组存储各个任务名

    gulp.task("default",["compileLess","watch:less"]);

    相关文章

      网友评论

        本文标题:使用gulp搭建less编译环境

        本文链接:https://www.haomeiwen.com/subject/dnlgvxtx.html