通过gulp将less转化为css

r囧r小猫 2023-03-05 06:28 6阅读 0赞

# 通过gulp将less转化为css #

## 第一步 ##

安装node.js  
官网地址：nodejs.org  
![这里插入图片描述][20200804162620828.png]  
在DOWNLOADS下选择需要的版本  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIwNzk0OA_size_16_color_FFFFFF_t_70]  
检查安装是否成功  
快捷键Windows+r，输入cmd，唤起DOS窗口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIwNzk0OA_size_16_color_FFFFFF_t_70 1]  
在DOS窗口中输入**node-v**和**npm-v**查看是否安装完成，如果安装成功则回复的是版本号。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIwNzk0OA_size_16_color_FFFFFF_t_70 2]

## 第二步 ##

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

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

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

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

初始化完毕后会在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文件夹的第一级  
![在这里插入图片描述][20200804172548645.png]

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

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

## 第五步 ##

在less文件夹下建立第一级主目录public和子目录less  
![在这里插入图片描述][20200804173155877.png]  
在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子目录  
![在这里插入图片描述][20200804195618109.png]

## 第六步 ##

安装压缩.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!

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIwNzk0OA_size_16_color_FFFFFF_t_70 3]

## 第七步 ##

创建顺序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文档。  
![在这里插入图片描述][20200804175717821.png]  
出现这种排版，因为压缩了，所以是紧凑排列。如果不需要压缩，则将gulpfile.js文件中的.pipe(cleanCSS())语句注释掉即可。  
![在这里插入图片描述][20200804175912245.png]

如果有什么错误的地方，请大家指正指正~

[20200804162620828.png]: /images/20230208/6cd7e32da3db4da7a407e64a5f29bcff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIwNzk0OA_size_16_color_FFFFFF_t_70]: /images/20230208/8233f8dfc7084b4fba507a8ada5ffc96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIwNzk0OA_size_16_color_FFFFFF_t_70 1]: /images/20230208/105ff6e65b8a4326be4ee6d6d60dfdec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIwNzk0OA_size_16_color_FFFFFF_t_70 2]: /images/20230208/ba361d72eaa64b89bca1c69a567df5ee.png
[20200804172548645.png]: /images/20230208/a0ad1172ea1942d4811a94b78d98f5b4.png
[20200804173155877.png]: /images/20230208/7690b3e2979b4e508c56f52f20f92679.png
[20200804195618109.png]: /images/20230208/4cee8fb360d64c4abc0b130afa017a75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTIwNzk0OA_size_16_color_FFFFFF_t_70 3]: /images/20230208/2f73b166a29e439fa6fffc0dabaf4aea.png
[20200804175717821.png]: /images/20230208/06b2b13a7d4f4a43bb35e459676ba011.png
[20200804175912245.png]: /images/20230208/027ff6d666f64b7ea4b4cdeaf8060a0c.png