温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

gulp 插件之 gulp-less,gulp-sass 和 gulp-sourcemaps

发布时间:2020-07-22 23:05:36 阅读:2536 作者:珞辰 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

gulp-less,gulp-sass 和 gulp-sourcemaps 的简介:

            gulp-less 插件用来将 less 文件编译成 css文件。

            gulp-sass 插件用来将 sass 文件编译成 css 文件。

            gulp-sourcemaps 插件用来生成 sourcemap 文件。用于当 less 或 sass 文件中有各种引入关系时,编译后就不容易找到对应的 less 或 sass 文件,所以需要生成 sourcemap 文件,方便修改。

一、gulp-less,gulp-sass 和 gulp-sourcemaps 插件的使用

1、安装 “gulp-less,gulp-sass 和 gulp-sourcemaps”插件命令(在终端进入到项目根目录执行)

            npm install --save-dev  gulp-load-plugins gulp-less gulp-sass gulp-sourcemaps

2、在项目根目录下提供 "gulp-less 和 gulp-sass" 插件任务配置需要的 src 目录和源文件(源文件放置到 src 目录下)

            mkdir src

3、在 gulpfile.js 文件中配置使用 "gulp-less,gulp-sass 和 gulp-sourcemaps"

 具体示例:// 只使用 gulp-less 和 gulp-sourcemaps 插件var gulp = require('gulp'),          plugins = require('gulp-load-plugins')();    // 装载插件      gulp.task('less', function () {                              // 自定义 "less" 任务    return gulp.src('src/less/*.less')                     // 模糊匹配 src/less 目录下所有 less 文件        .pipe(plugins.sourcemaps.init())               //  初始化 gulp-sourcemaps 插件         .pipe(plugins.less())                                   // 调用 less 插件,编译 less 文件        .pipe(plugins.sourcemaps.write())             // 生成 sourcemap 文件        .pipe(gulp.dest('dist/less'));                       // 目标文件存放路径});具体示例:// 只使用 gulp-sass 和 gulp-sourcemaps 插件var gulp = require('gulp'),          plugins = require('gulp-load-plugins')();    // 装载插件      gulp.task('sass', function () {                             // 自定义 "sass" 任务    return gulp.src('src/sass/*.scss')                   // 模糊匹配 src/sass 目录下所有 scss 文件        .pipe(plugins.sourcemaps.init())               // 初始化 gulp-sourcemaps 插件            .pipe(plugins.sass())                                  // 调用 sass 插件,编译 sass 文件        .pipe(plugins.sourcemaps.write())            // 生成 sourcemap 文件        .pipe(gulp.dest('dist/sass'));                      // 目标文件存放路径});// 定义默认任务gulp.task('default', [ 'less' , 'sass' ], function(){      gulp.watch('src/less/*.less', function(){      // 监听 src/less 目录下的所有 less 文件,自动编译                  gulp.run('less');                          });      gulp.watch('src/less/*.scss', function(){     // 监听 src/sass 目录下的所有 scss 文件,自动编译                  gulp.run('sass');      });});

4、最后在终端运行 "gulp" 命令

PS:如果没有错误提示信息,证明就没什么问题了。现在去项目根目录下看是否生成 "dist/{less/sass}" 目录和目标文件。未完待续。。。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×