首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
gulp介绍
安装 Node 和 gulp
使用 gulp 压缩 JS
使用 gulp 压缩 CSS
使用 gulp 压缩图片
使用 gulp 编译 LESS
使用 gulp 编译 Sass
使用 gulp 构建一个项目
当前位置:
首页>>
技术小册>>
Gulp入门指南
小册名称：Gulp入门指南
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护。 ####安装 `npm install gulp-less` 基本用法 ```bash // 获取 gulp var gulp = require('gulp') // 获取 gulp-less 模块 var less = require('gulp-less') // 编译less // 在命令行输入 gulp images 启动此任务 gulp.task('less', function () { // 1. 找到 less 文件 gulp.src('less/**.less') // 2. 编译为css .pipe(less()) // 3. 另存文件 .pipe(gulp.dest('dist/css')) }); // 在命令行使用 gulp auto 启动此任务 gulp.task('auto', function () { // 监听文件修改，当文件被修改则执行 images 任务 gulp.watch('less/**.less', ['less']) }) // 使用 gulp.task('default') 定义默认任务 // 在命令行使用 gulp 启动 less 任务和 auto 任务 gulp.task('default', ['less', 'auto']) ``` 你可以访问 gulp-less 以查看更多用法。 LESS 代码和编译后的CSS代码 less/a.less ```bash .less{ a{ color:pink; } } ``` less/import.less ``` @import "a.less"; .import{ a{ color:red; } } ``` less/a.css ``` .less a { color: pink; } less/import.css .less a { color: pink; } .import a{ color: red; } ```
上一篇：
使用 gulp 压缩图片
下一篇：
使用 gulp 编译 Sass
该分类下的相关小册推荐：
暂无相关推荐.
