前端开发 gulp&&less的安装

最新推荐文章于 2024-11-11 13:11:08 发布

Kyrossssssss

最新推荐文章于 2024-11-11 13:11:08 发布

阅读量115

点赞数

分类专栏：前端文章标签： less

本文链接：https://blog.csdn.net/qq_35590165/article/details/100697664

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在前端项目中安装并配置Gulp和Less。首先，需要全局安装gulp，然后在项目目录下创建package.json文件。接着，通过npm安装所需的gulp依赖包，包括gulp-less和gulp-autoprefixer。最后，在项目中创建gulpfile.js，导入必要的模块，以实现Gulp自动化构建流程。

摘要由CSDN通过智能技术生成

Gulp && less 的安装

一.首先要确定全局安装了gulp， gulp的全局安装命令 npm install gulp -g

gulp -查看版本号

二、在项目目录下执行以下命令，创建package.json文件： npm init

三、依次执行下面的命令下载gulp依赖包和gulp-less以及gulp-autoprefixe

npm install gulp-less --save-dev
npm install gulp -D
npm install gulp-less gulp-autoprefixer -D

四、在项目目录中创建一个gulpfile的js文件，js代码如下//1:引入所需要的模块

var gulp  =require("gulp");
var less  =require("gulp-less");
gulp.task("compileLess",function(){
  //找到项目中less文件夹中所有文件夹下的所有less文件
  gulp.src("./src/assets/less/*.less")
   //进行预编译处理,保持与引入的模块一致
  .pipe(less())
  //编译后将less编译成的css文件保存到项目目录下的css文件夹中
  .pipe(gulp.dest('./src/assets/css'));
  return new Promise(function(resolve, reject) {
    console.log("HTTP Server Started");
    resolve();
  });
});
gulp.task("watch",function(){
  gulp.watch('./src/assets/less/*.less',gulp.series('compileLess'));
})