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