Gulp与Less的理解认识

最新推荐文章于 2023-09-18 11:50:28 发布
最新推荐文章于 2023-09-18 11:50:28 发布
阅读量313 收藏
点赞数
分类专栏： Webpack、Vite、Gulp 文章标签： Gulp Less 自动化构建工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42614080/article/details/103211083
版权

Gulp与Less

一、Gulp的概念
  1. 自动化构建工具，可以通过gulp对我们的代码进行全自动的编译。可以实现代码的自动压缩、编译、实时监测等功能
二、特点
  1. 任务化
  2. 基于流(数据流io:input/output)操作
    整个操作都是基于数据流进行操作
    具备属于gulp的内存，所有的操作全部在gulp的内存当中
    对应着输入流和输出流会，将数据通过src方法输入，通过dest方法输出
  3. 简易的API
三、安装
  1. npm init 初始化项目package.json
  2. npm install gulp-cli -g 全局安装gulp-cli
  3. npm install gulp@3 --save-dev 局部安装gulp
  4. 在项目目录下开启cmd，输入gulp，出现下面的提示则表示安装成功
    [22:40:15] No gulpfile found
  5. 注意：全局安装也可以使用 npm install --global gulp，但是却不能够随意的在项目目录切换gulp版本，不够灵活，所以选择使用gulp-cli，脚手架安装
  6. gulp -v 可以查看gulp的版本
四、使用
  1. 注册事件
    实例代码：
// 注册
gulp.task('事件名',function(){
})
  1. 执行默认事件
    实例代码：
// 默认事件
gulp.task('default',['参数'])
五、gulp的具体应用
  1. js文件的处理
    注意：需要提前通过 npm install gulp-concat gulp-uglify gulp-rename --save-dev 命令安装插件
    实例代码：
var gulp = require("gulp");
//  引入插件  
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");

// 注册 任务
// 操作js

//  注册一个js事件，在回调函数中return返回数据
//  第一个参数为事件的名称，js
gulp.task("js",function(){
   //  注册事件完成之后将内容输出到内存当中
   return gulp.src("js/*.js")  // 将文件读取到内存当中
       // pipe 是管道
       .pipe(concat("bundle.js"))  // 合并代码
       .pipe(gulp.dest("dist/js/"))  // 将文件输出到指定目录
       .pipe(uglify())   // 将代码进行压缩
       .pipe(rename({suffix:".min"}))  // 设置文件添加后缀
       .pipe(gulp.dest("dist/js/"))
});

// 默认事件，设置默认任务
gulp.task("default",[]);

运行成功之后： gulp js命令进行执行任务

  1. less文件的处理
    注意：需要提前通过 npm install gulp-less gulp-clean-css --save-dev 命令安装插件
    实例代码：
// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");


// 注册任务事件 js
gulp.task("js",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/js/"))
});


// 注册任务 less
gulp.task("less",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("less/*.less")
        //  less编译
        .pipe(less())
        //  将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
        .pipe(gulp.dest("css/"))

});

// 默认事件，设置默认任务
gulp.task("default",[]);

运行成功之后， gulp less 命令执行

  1. css文件的处理
    实例代码：
// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");


// 注册任务事件 js
gulp.task("js",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/js/"))
});


// 注册任务 less
gulp.task("less",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("less/*.less")
        //  less编译
        .pipe(less())
        //  将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
        .pipe(gulp.dest("css/"))

});

// 默认事件，设置默认任务
gulp.task("default",[]);// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");


// 注册任务事件 js
gulp.task("js",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/js/"))
});


// 注册任务 less
gulp.task("less",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("less/*.less")
        //  less编译
        .pipe(less())
        //  将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
        .pipe(gulp.dest("css/"))

});


// 注册任务 css
/* gulp.task("css",function(){
    // 注册事件完成以后将内容输出到内存当中,写入
    return gulp.src("css/*.css")
        // 合并代码
        .pipe(concat("build.css"))
        // 尽可能的考虑ie8
        .pipe(cleanCss({compatibility:"ie8"}))
        // 重命名
        .pipe(rename({suffix:".min"}))
        // 输出
        .pipe(gulp.dest("dist/css/"))
}) */

// 如果在css任务中添加第二个参数，那么相当于添加了一个依赖
gulp.task("css",["less"],function(){  
    // 注册事件完成以后将内容输出到内存当中，写入
    return  gulp.src("css/*.css")
        // 合并代码
        .pipe(concat("build.css"))
        // 尽可能考虑ie8
        // 通过cleanCss方法进行代码压缩，并且传入参数compatibility，能够让代码的压缩适应ie8
        .pipe(cleanCss({compatibility:"ie8"}))
        // 重命名
        .pipe(rename({suffix:".min"}))
        // 输出
        .pipe(gulp.dest("dist/css/"))
})

// 默认事件，设置默认任务
gulp.task("default",[]);

运行成功之后，gulp css 命令执行

  1. img 文件的处理
    注意：需要提前通过 npm install gulp-imagemin --save -dev 命令安装插件
    实例代码：
// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");


// 注册任务事件 js
gulp.task("js",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/js/"))
});


// 注册任务 less
gulp.task("less",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("less/*.less")
        //  less编译
        .pipe(less())
        //  将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
        .pipe(gulp.dest("css/"))

});

// 默认事件，设置默认任务
gulp.task("default",[]);// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");


// 注册任务事件 js
gulp.task("js",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/js/"))
});


// 注册任务 less
gulp.task("less",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("less/*.less")
        //  less编译
        .pipe(less())
        //  将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
        .pipe(gulp.dest("css/"))

});


// 注册任务 css
/* gulp.task("css",function(){
    // 注册事件完成以后将内容输出到内存当中,写入
    return gulp.src("css/*.css")
        // 合并代码
        .pipe(concat("build.css"))
        // 尽可能的考虑ie8
        .pipe(cleanCss({compatibility:"ie8"}))
        // 重命名
        .pipe(rename({suffix:".min"}))
        // 输出
        .pipe(gulp.dest("dist/css/"))
}) */

// 如果在css任务中添加第二个参数，那么相当于添加了一个依赖
gulp.task("css",["less"],function(){  
    // 注册事件完成以后将内容输出到内存当中，写入
    return  gulp.src("css/*.css")
        // 合并代码
        .pipe(concat("build.css"))
        // 尽可能考虑ie8
        // 通过cleanCss方法进行代码压缩，并且传入参数compatibility，能够让代码的压缩适应ie8
        .pipe(cleanCss({compatibility:"ie8"}))
        // 重命名
        .pipe(rename({suffix:".min"}))
        // 输出
        .pipe(gulp.dest("dist/css/"))
})

// 注册任务 img
gulp.task("images",function(){
    // 注册事件完成以后将内容输出到内存当中，写入
    return gulp.src("img/*")
        .pipe(imagemin()) 
        .pipe(gulp.dest("dist/img/"))
})

// 默认事件，设置默认任务
gulp.task("default",[]);
  1. 异步与同步任务的执行

1） 异步任务的执行：
异步任务的执行，我们只需要将我们注册的事件传入默认事件的第二个参数数组当中即可

// 默认事件   
gulp.task("default", ['js','less','css']);

less转换成css文件后才能执行css的解析，也就是说css的编译是依赖less的，为了处理这个问题，可以在css事件中传入第二个参数，在执行css之前就会先去等待less的编译完成
实例代码：

gulp.task("css",["less"],function(){  
    // 注册事件完成以后将内容输出到内存当中，写入
    return  gulp.src("css/*.css")
        // 合并代码
        .pipe(concat("build.css"))
        // 尽可能考虑ie8
        // 通过cleanCss方法进行代码压缩，并且传入参数compatibility，能够让代码的压缩适应ie8
        .pipe(cleanCss({compatibility:"ie8"}))
        // 重命名
        .pipe(rename({suffix:".min"}))
        // 输出
        .pipe(gulp.dest("dist/css/"))
})


// 异步事件  注册事件传入默认事件的第二个参数数组中
// 开始顺序 js > less > css         完成顺序  less > js > css
gulp.task("default",["js","less","css"]);

运行成功之后， gulp 命令执行

2）同步任务的执行：
将每个事件中的return去掉即可
实例代码：

// 同步事件  去掉注册事件中的return    
// 速度快，但是太耦合了，一个不能执行，其它的都不能执行
gulp.task("default",["js","less","css"]);

运行成功之后，gulp 命令执行

  1. 半自动编译
    注意：需要提前通过 npm install gulp-livereload --save-dev 命令安装插件
    实例代码：
// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// var imagemin = require("gulp-imagemin");
var livereload = require("gulp-livereload");

// 注册任务事件 js
gulp.task("js",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/js/"))
});


// 注册任务 less
gulp.task("less",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("less/*.less")
        //  less编译
        .pipe(less())
        //  将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
        .pipe(gulp.dest("css/"))

});


// 注册任务 css
/* gulp.task("css",function(){
    // 注册事件完成以后将内容输出到内存当中,写入
    return gulp.src("css/*.css")
        // 合并代码
        .pipe(concat("build.css"))
        // 尽可能的考虑ie8
        .pipe(cleanCss({compatibility:"ie8"}))
        // 重命名
        .pipe(rename({suffix:".min"}))
        // 输出
        .pipe(gulp.dest("dist/css/"))
}) */

// 如果在css任务中添加第二个参数，那么相当于添加了一个依赖
gulp.task("css",["less"],function(){  
    // 注册事件完成以后将内容输出到内存当中，写入
    return  gulp.src("css/*.css")
        // 合并代码
        .pipe(concat("build.css"))
        // 尽可能考虑ie8
        // 通过cleanCss方法进行代码压缩，并且传入参数compatibility，能够让代码的压缩适应ie8
        .pipe(cleanCss({compatibility:"ie8"}))
        // 重命名
        .pipe(rename({suffix:".min"}))
        // 输出
        .pipe(gulp.dest("dist/css/"))
})



// 注册任务 img
gulp.task("images",function(){
    // 注册事件完成以后将内容输出到内存当中，写入
    return gulp.src("img/*")
        .pipe(imagemin()) 
        .pipe(gulp.dest("dist/img/"))
})



// 半自动监听
gulp.task("watch",["default"],function(){

    // 开启监听
    livereload.listen();
    // 确认监听的目标和执行的任务
    gulp.watch("js/*.js",["js"]);
    gulp.watch(["css/*.css","less/*.less"],["css"])
})

// 设置默认任务
gulp.task("default",[]);

运行，通过 gulp watch 命令执行

  1. 全自动编译与自动打开
    注意：需要提前通过 npm install gulp-connect --save-dev 命令安装插件
    需要提前通过 npm install open --save-dev 命令安装插件
    实例代码：
// 引入插件
var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var cleanCss = require("gulp-clean-css");
// var imagemin = require("gulp-imagemin");
var livereload = require("gulp-livereload");
var connect = require("gulp-connect");
var open = require("open");



// 注册任务事件 js
gulp.task("js",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(gulp.dest("dist/js/"))
        .pipe(uglify())
        .pipe(rename({suffix:".min"}))
        .pipe(gulp.dest("dist/js/"))
  // 开启实时监听
        .pipe(livereload())
        .pipe(connect.reload())
});


// 注册任务 less
gulp.task("less",function(){
    // 注册事件完成以后将内容输出到内存当中
    return  gulp.src("less/*.less")
        //  less编译
        .pipe(less())
        //  将less编译之后的文件输出到csss目录，和其它的css文件在一起编译压缩合并
        .pipe(gulp.dest("css/"))
// 开启实时监听
        .pipe(livereload())
        .pipe(connect.reload())

});


// 注册任务 css
/* gulp.task("css",function(){
    // 注册事件完成以后将内容输出到内存当中,写入
    return gulp.src("css/*.css")
        // 合并代码
        .pipe(concat("build.css"))
        // 尽可能的考虑ie8
        .pipe(cleanCss({compatibility:"ie8"}))
        // 重命名
        .pipe(rename({suffix:".min"}))
        // 输出
        .pipe(gulp.dest("dist/css/"))
}) */

// 如果在css任务中添加第二个参数，那么相当于添加了一个依赖
gulp.task("css",["less"],function(){  
    // 注册事件完成以后将内容输出到内存当中，写入
    return  gulp.src("css/*.css")
        // 合并代码
        .pipe(concat("build.css"))
        // 尽可能考虑ie8
        // 通过cleanCss方法进行代码压缩，并且传入参数compatibility，能够让代码的压缩适应ie8
        .pipe(cleanCss({compatibility:"ie8"}))
        // 重命名
        .pipe(rename({suffix:".min"}))
        // 输出
        .pipe(gulp.dest("dist/css/"))‘
// 开启实时监听
        .pipe(livereload())
        .pipe(connect.reload())
})



// 注册任务 img
gulp.task("images",function(){
    // 注册事件完成以后将内容输出到内存当中，写入
    return gulp.src("img/*")
        .pipe(imagemin()) 
        .pipe(gulp.dest("dist/img/"))
// 开启实时监听
        .pipe(livereload())
        .pipe(connect.reload())
})



// 半自动监听
gulp.task("watch",["default"],function(){

    // 开启监听
    livereload.listen();
    // 确认监听的目标和执行的任务
    gulp.watch("js/*.js",["js"]);
    gulp.watch(["css/*.css","less/*.less"],["css"])
})


// 全自动监听，相当于是微型的服务器
gulp.task("server",["default"],function(){

    connect.server({
        //  服务器的根目录地址
        root:"dist/",
        //  是否开启实时监听
        livereload:true,
        //  服务器端口
        port:6672
    })

    gulp.watch("js/*.js",["js"]);
    gulp.watch(["css/*.css","less/*.less"],["css"])

    open("http://localhost:6672/")
})



// 设置默认任务
gulp.task("default",[]);

运行，通过 gulp server 命令进行执行

  1. 总结
    1）less和sass的命令 搭建sass环境
    npm rebuild node-sass
    npm install gulp-sass --save-dev

2）命令汇总
npm init
npm install gulp-cli -g
npm install gulp@3 --save-dev
npm install gulp-livereload gulp-connect gulp-sass --save-dev
npm rebuild node-sass
npm install gulp-sass --save-dev
gulp sass
gulp server

3）下载

var gulp = require("gulp");``
var livereload = require("gulp-livereload");
var connect = require("gulp-connect");
var sass = require("gulp-sass");


gulp.task('sass', function() {
    return gulp.src('sass/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/'))
        .pipe(livereload())
        .pipe(connect.reload())
})


gulp.task('watch', ['default'], function() {
    livereload.listen();

    gulp.watch('sass/*.scss', ['sass']);
})


gulp.task("server",["default"],function(){

    connect.server({
        //  服务器的根目录地址
        root:"dist/",
        //  是否开启实时监听
        livereload:true,
        //  服务器端口
        port:6672
    })

    gulp.watch("js/*.js",["js"]);
    gulp.watch(["css/*.css","less/*.less"],["css"]);
    gulp.watch('sass/*.scss', ['sass']);

    // open("http://localhost:6672/")
})

gulp.task("default",["sass"]);
城南花开ze
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
gulp-less gulp打包处理less
loushengyue
04-10 2471
序 关于less： Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。 Less 扩充了 CSS 语言，增加了诸如变量、混合（mixin）、运算、函数等。 Les...
gulp-less-changed：仅当.less文件或其依赖项已更改时，才通过gulp流传递
02-03
gulp-less-changed 一个插件，仅当它们或它们的依赖性已更改时才通过LESS文件 分析LESS文件及其相关性，即使用data-uri导入和包含的文件，以节省浪费的时间来重新生成输出。 安装 $ npm install gulp-less-changed ...
gulp教程之gulp-less
周搏的博客
12-15 1050
简介：使用gulp-less插件将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件1.1、gulp基本使用还未掌握？请参看： gulp详细入门教程1.2、本示例目录结构如下：2、本地安装gulp-less2.1
gulp介绍及less插件详解
sky_sunshine_x的博客
05-17 863
GULP是前端开发过程中对代码惊醒构建的工具，是自动化项目的利器，能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成，使用它，我们不仅可以愉快地编写代码，还大大提高了我们的工作效率。 GULP基于Nodejs的自动任务运行器，他能自动的完成javascript/coffee/sass/less/html/image/css等文件的测试、检查、合并、压缩、格式化、浏览器
gulp-less
董无敌啊
03-29 246
安装 命令：npm install gulp-less 或者 cnpm install gulp-less编写//获取gulp var gulp = require('gulp')//获取gulp-less模块 var less = require("gulp-less")//编译less //在命令行输入gulp less启动此任务 gulp.task('less',function(){
adfab-gulp-boilerplate：包括Gulp，LessSASS，BrowserSync的样板
02-03
ADFAB Gulp样板 这个样板的目标是释放您的时间，因此您可以做些比重新发明轮子更有趣的事情。 产品特点 修改代码后自动重新加载浏览器（使用 ） CSS / JS Sourcemaps HTML缩小 JS编译 Transpiler（ES6支持FTW） ...
gulp-theme-less:Gulp 的 LESS 插件。 清理 LESS 文件，制作简单的主题
07-03
Gulp 的 LESS 插件。 清理 LESS 文件，制作简单的主题。 什么干净？ 使用静态内容清理属性、选择器和混合。 因此，如果存在变量，内容将是动态的。 制作简单的主题 简单干净。 您无需担心所有静态内容。 主题只需要...
gulp-less-data:Gulp LESS数据
05-15
Gulp LESS数据安装npm install gulp-less-data用法 var gulp = require ( "gulp" ) ;var less = require ( "gulp-less" ) ;var lessData = require ( "gulp-less-data" )gulp . src ( "test.less" ) . pipe ( ...
gulp:gulp打包工具，less转译压缩
05-14
开发者可以为特定的任务找到相应的插件，如 `gulp-less` 用于转换Less，`gulp-clean-css` 压缩CSS，`gulp-uglify` 压缩JavaScript。这些插件通过 `npm` 安装并简单地引入到`gulpfile.js` 中。 4. **管道（Pipe）**...
使用gulp库、less转换css、html提取公共部分、js转换成ES6语法
最新发布
m0_63359528的博客
09-18 198
在src路径下新建common文件夹，然后新建header.html文件放置在公共区域的header.html的内容为default.html和article.html的头部区域。可以列出可用的 npm 源，并且可以快速切换当前使用的源。通过切换到合适的源，你可以选择更快的镜像，从而提高包的下载速度和安装效率。它允许你在不同的 npm 源之间切换，以便加快安装速度或解决与某些源相关的问题。效果如下：（这里是我做完less转换css截的图片，所以包含了dist/css这个路径）使用gulp 文件名来运行。
gulp系列之gulp-csso插件的使用
老__L的博客
09-25 236
gulp-csso插件的使用 压缩css
gulp自动化打包（上）
热门推荐
j_bleach的博客
11-05 1万+
gulp自动化打包（上）文章概述本文分为上下两篇，上篇主要介绍一些常用的gulp插件（也是此次打包主要用的gulp插件），而下篇主要以一个demo项目为例，从本地checkout出合适的git版本，压缩、合并、到最后打成zip包，发送至指定目录，做一个全面的演示。
gulp-less配置
weixin_41658426的博客
06-20 405
1.首先默认你已安装好node,gulp，并安装了connect插件。在此基础上，我们来安装less2.进入工程目录，命令提示符执行npm install gulp-less --save-dev less 3.安装gulp-plumbernpm install gulp-plumber 如果不安装此插件，我们在开启服务器，less，css监听时，每次less编译出现错误，命令行会报错并停止监听，...
gulp的安装及使用
m0_69068349的博客
03-20 72
gulp
如何使用gulp编辑less？
天心天地生的博客
10-12 362
什么是gulp gulp是自动化构建工具,构建工具可以使繁琐的工作简单化，提高开发人员的工作效率，对于前端开发开发人员来说，我们通常用gulp来合并文件，压缩文件，编译less和sass文件等。 安装gulp gulp 是基于 node 实现的，那么我们就需要先安装 node。 打开 https://nodejs.org/ 点击绿色的 INSTALL 按钮下...
如何通过gulp构建工具来编译less文件
u012829160的博客
05-12 3373
简介： gulp：gulp是自动化构建工具,构建工具可以使繁琐的工作简单化，提高开发人员的工作效率，对于前端开发开发人员来说，我们通常用gulp来合并文件，压缩文件，编译less和sass文件等。 less：LESS 是动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单。程序员通过变量和函数来定义less文件，通过less文件编译成css文件以便使用，less引入变量
一篇迟到的gulp文章，代码合并压缩，less编译
angyangan9569的博客
05-05 386
前言 这篇文章本应该在去年17年写的，但因为种种原因没有写，其实主要是因为懒（捂脸）。gulp出来的时间已经很早了，16年的时候还很流行，到17年就被webpack 碾压下去了，不过由于本人接触gulp的时候比较晚，16年的时候才听说有这么个玩意，正真用它是在17年的时候，但是虽然现在webpack已经大行其道，我们每个人都 在积极去拥抱它，不过gulp在现在来说也并不是一无是处，还是有...
gulp工具的使用
weixin_67855266的博客
03-19 1335
在src目录下创建common目录，在common目录下创建header.html文件，将将头部公共代码复制到header.html文件中。在gulpfile.js文件中调用gulp-htmlmin插件，实现队HTML文件中代码的压缩。执行gulp任务，在dist下的css目录中会出现一个.css文件，里面是转换之后的代码。执行gulp任务，dist的js目录下就会出现一个新的js文件，储存转化后的结果。执行gulp任务，dist的js目录下就会出现一个新的js文件，储存转化后的结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值