通过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())语句注释掉即可。
如果有什么错误的地方,请大家指正指正~