通过gulp将less转化为css

通过gulp将less转化为css

第一步

安装node.js
官网地址：nodejs.org

在DOWNLOADS下选择需要的版本

检查安装是否成功
快捷键Windows+r，输入cmd，唤起DOS窗口

在DOS窗口中输入node-v和npm-v查看是否安装完成，如果安装成功则回复的是版本号。

第二步

创建less文件夹，在less文件夹中初始化。

在less文件夹中直接进入DOS窗口。（可以使用快捷键shift+鼠标右键，选择“在此处打开Powershell”进入，或者在less文件夹的地址栏输入cmd进入。）

输入npm init初始化项目。会进行一系列的信息配置，可以不进行配置，使用默认配置。

package name:	项目名字
version:	版本号
description:	对项目的叙述
entry point:	项目的入口文件
test command:	启动执行文件
git repository:	git的仓库地址
keywirds：	项目关键字
author:	作者
license:	发行证书

初始化完毕后会在less文件夹中生成一个pakeage.json文件，里面可以修改我们刚刚的信息配置。

{
  "name": "less",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-less": "^4.0.1"
  },
  "dependencies": {
    "gulp-clean-css": "^4.3.0"
  }
}

第三步

安装gulp 、 guli -cli和gulp -less
在DOS窗口输入npm install gulp --save-dev安装gulp
在DOS窗口输入npm install --global gulp-cli安装guli -cli
在DOS窗口输入npm install gulp-less --save-dev安装gulp -less

第四步

在less文件夹下配置gulpfile.js文件，文件建立在less文件夹的第一级

在gulpfile.js文件中调用gulp和gulp-less

const gulp = require('gulp')
const less = require("gulp-less")

第五步

在less文件夹下建立第一级主目录public和子目录less

在gulpfile.js文件中编写 less文件自动转化

gulp.task("lessChangeCss",function(){
	return gulp.src("public/less/*.less") //转换public/less文件夹里面的所有.less的文件
	.pipe(less()) //转换less到css
	.pipe(gulp.dest("public/css")) //把转化的public/less文件夹
})

转化后将自动在public文件夹下生成css子目录

第六步

安装压缩.css的依托包
在DOS中输入npm install gulp-clean-css进行安装

安装完成后在gulpfile.js文件中引入

const cleanCSS = require("gulp-clean-css")

将less文件转化为css文件以及压缩css函数(lessTask），在gulpfile.js文件中写入lessTask函数。

function lessTask(){
	return gulp.src("public/less/*.less") //转换public/less文件夹里面的所有.less的文件
	.pipe(less()) //转换less到css
	// .pipe(cleanCSS()) //压缩css
	.pipe(gulp.dest("public/css")) //把转化的css输出到public/css文件夹
}

改变调试函数为异步函数，在gulpfile.js文件中写入

async function defaultTask(){
	await console.log("done!");
}

我们less文件中代码每一次转换到css中成功时，会在DOS输出done!

第七步

创建顺序task链
let taskSeries = gulp.series(lessTask,defaultTask);

编写监听函数 watch -监听public/less 文件夹中所有的文件，当发生变化的时候，则执行taskSeries任务链
function watch(){
gulp.watch(“public/less/*.less”,taskSeries);
}

同时执行2个task 第一个为watch 第二个为taskSeries
taskSeries = gulp.parallel(watch,taskSeries);
exports.default= taskSeries

//创建顺序task链
let taskSeries = gulp.series(lessTask,defaultTask);


//编写监听函数 watch -监听public/less 文件夹中所有的文件，当发生变化的时候
//则执行taskSeries任务链
function watch(){
	gulp.watch("public/less/*.less",taskSeries);
}


//同时执行2个task 第一个为watch 第二个为taskSeries
taskSeries = gulp.parallel(watch,taskSeries);

exports.default= taskSeries

第八步

在public/less 文件夹中写一个less文件使用gulp进行转化吧

从less文件夹进入DOS窗口，输入gulp，在public/less中写入的less文件将转化为css文件夹的css文档。

出现这种排版，因为压缩了，所以是紧凑排列。如果不需要压缩，则将gulpfile.js文件中的.pipe(cleanCSS())语句注释掉即可。

鄙人拙作，有不当之处，还请指教。