使用gulp搭建less编译环境

一、首先要确定全局安装了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"]);

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

推荐阅读更多精彩内容

  • 1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp: npm install...
    F_imok阅读 2,407评论 1 11
  • 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用...
    懵逼js阅读 1,101评论 0 8
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,518评论 1 32
  • 什么是GULP? GULP 是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能 对...
    碧玉含香阅读 671评论 0 0
  • npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、...
    lovelydong阅读 458评论 0 2