在Gulp中的使用插件进行文件操作_火鸡面多放火鸡的博客-程序员宅基地

技术标签: gulp  nodejs  javascript  自动化构建  

一、使用gulp-sass转换scss文件

先单独为node-sass配置镜像源

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

因为在安装gulp-sass的时候,它内部会去安装node-sass,而node-sass是一个C++的模块,它内部会有对C++程序集的依赖,这些二进制的包需要通过国外的站点去下载,可能会下载不下来,所以我们通过淘宝的镜像源去单独为node-sass配置镜像源。

安装gulp-sass
yarn add gulp-sass --dev

使用gulp-sass

const {
     src, dest } = require("gulp")
const sass = require('gulp-sass')

const style = () => {
    
    return src('src/assets/styles/*.scss', {
     base: 'src' }) // base定义基准路径,我们设置为src,这样就会把src后面的目录结构保存下来
            .pipe(sass({
    outputStyle: "expanded"})) /* 基本上每个插件提供的都是一个函数,函数的调用结果会返回一个文件的转换流 */
            /* 注意:sass在运行的时候会忽略 _下划线开头的文件,它会认为这种文件都是我们在主文件中依赖的文件,就不会被转换
             sass转换的css文件每个样式的最后一个大括号不会空行,我们可以通过配置选项 outputStyle: "expanded" 使之空行(完全展开)*/
            .pipe(dest('dist'))
}

module.exports = {
    
    style
}

文件目录结构是这样的
在这里插入图片描述
运行yarn gulp style
在这里插入图片描述
成功将main.scss文件转换成main.css文件

二、使用gulp-babel转换js文件

安装

yarn add gulp-babel @babel/core @babel/preset-env --dev

使用

const {
     src, dest } = require("gulp")
const babel = require("gulp-babel")

const script = () => {
    
    return src('src/assets/scripts/*.js', {
     base: 'src' })
            .pipe(babel({
     presets:['@babel/preset-env']})) // 如果这里没有配置presets的话,也是可以转换,但是转换前后几乎没什么区别,也可以通过babelrc文件去配置
            .pipe(dest('dist'))
}
module.exports = {
    
    script
}

运行

yarn gulp script

结果
在这里插入图片描述
转换前

// TODO: site logics

$(($) => {
    
  const $body = $('html, body')

  $('#scroll_top').on('click', () => {
    
    $body.animate({
     scrollTop: 0 }, 600)
    return false
  })
})

转换后

"use strict";

// TODO: site logics
$(function ($) {
    
  var $body = $('html, body');
  $('#scroll_top').on('click', function () {
    
    $body.animate({
    
      scrollTop: 0
    }, 600);
    return false;
  });
});

三、使用模板引擎插件gulp-swig用于处理html文件

安装

yarn add gulp-swig --dev

使用

const {
     src, dest } = require("gulp")
const swig = require("gulp-swig")
const data = {
    
    str:"this is demo"
  }
  
const page = () => {
    
    return src('src/*.html', {
     base: 'src' })
            .pipe(swig({
     data })) // 配置data,就是模板需要的数据,data: data简写为data
            .pipe(dest('dist'))
}

module.exports = {
    
    page
}

运行yarn gulp page

转换前

{
    {
    str}}

转换后

this is demo

四、使用gulp-imagemin插件转换图片和字体

安装cnpm i gulp-imagemin -D
由于gulp-imagemin内部也是依赖于一些通过C++完成的模块,只要是通过C++完成的模块,就涉及到二进制的程序集,这些程序集大都在github上下载,下载会比较慢,我之前使用yarn下载花了三分钟左右,而且有时候下载不下来,改用cnpm会更好。

使用

const {
     src, dest} = require("gulp")
const imagemin= require("gulp-imagemin")

const image = () => {
    
    return src('src/assets/images/**', {
     base: 'src' })
            .pipe(imagemin())
            .pipe(dest('dist'))
}

// 字体文件其实只需要拷贝过去就好了,但是里面也有svg文件,所以这里也用imagemin转换一下
const font = () => {
    
    return src('src/assets/fonts/**', {
     base: 'src' })
            .pipe(imagemin())
            .pipe(dest('dist'))
}

module.exports = {
    
    image,
    font
}

运行

yarn gulp image
yarn gulp font

在这里插入图片描述
命令行中会显示图片被压缩的百分比,并且这种压缩是无损的,只是清除了图片信息中的无用数据。

五、使用gulp-load-plugins避免重复引入插件动作

安装

yarn add gulp-load-plugins --dev

使用

// gulp-load-plugins导出的是一个方法,通过这个方法可以得到一个对象,所有的插件都会成为对象上的属性
// 例如 gulp-sass就是plugins.sass,如果是gulp-sass-sass这种类型,就是plugins.sassSass驼峰式
const loadPlugins = require("gulp-load-plugins")
const plugins = loadPlugins()

const style = () => {
    
    return src('src/assets/styles/*.scss', {
     base: 'src' }) // base定义基准路径,我们设置为src,这样就会把src后面的目录结构保存下来
            .pipe(plugins.sass({
    outputStyle: "expanded"}))
            .pipe(dest('dist'))
}

module.exports = {
    
    style
}

一样可以正常运行style任务

六、使用del插件清除文件

安装

yarn add del --dev

del插件不是gulp插件,但是可以在gulp中使用,主要是用来转换文件之前清除dist文件

const del = require("del")
const clean = () => {
    
    return del(['dist']) // 会返回一个promise对象,通过promise的状态结束任务
}
module.export = {
    
	clean
}

七、梳理代码

const {
     src, dest, parallel, series } = require("gulp")

const loadPlugins = require("gulp-load-plugins")
const plugins = loadPlugins()
const del = require("del")

const data = {
    
    str: 'this is demo'
  }

const style = () => {
    
    return src('src/assets/styles/*.scss', {
     base: 'src' }) 
            .pipe(plugins.sass({
    outputStyle: "expanded"}))
            .pipe(dest('dist'))
}

const script = () => {
    
    return src('src/assets/scripts/*.js', {
     base: 'src' })
            .pipe(plugins.babel({
     presets:['@babel/preset-env']})) 
            .pipe(dest('dist'))
}

const page = () => {
    
    return src('src/*.html', {
     base: 'src' })
            .pipe(plugins.swig({
     data })) 
            .pipe(dest('dist'))
}

const image = () => {
    
    return src('src/assets/images/**', {
     base: 'src' })
            .pipe(plugins.imagemin())
            .pipe(dest('dist'))
}

// 字体文件其实只需要拷贝过去就好了,但是里面也有svg文件,所以这里也用imagemin转换一下
const font = () => {
    
    return src('src/assets/fonts/**', {
     base: 'src' })
            .pipe(plugins.imagemin())
            .pipe(dest('dist'))
}

// 处理一些额外的文件
const extra = () => {
    
    return src('public/**', {
     base: 'public' })
            .pipe(dest('dist'))
}

// 转换文件前清除dist
const clean = () => {
    
    return del(['dist'])
}

// 组合上面的任务,因为这些任务并没有什么牵连,可以同时进行,所以使用parallel
/* 定义compile处理src目录下的文件 */
const compile = parallel(style, script, page, image, font)

// 定义build处理所有文件
// 因为我们要先删除,再生成,所以要用series串行执行任务
const build = series(clean, parallel(extra, compile))

module.exports = {
    
    build
}

执行yarn add build就能将src目录以及public目录的文件转换,转换前会清空dist文件

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45047039/article/details/109776502

智能推荐

scheduleAtFixedRate 和 scheduleWithFixedDelay ,看完此篇,不信你不会(图解)_程序锋子的博客-程序员宅基地_scheduleatfixedrate 参数说明

ScheduledThreadPoolExecutor 线程池的 scheduleAtFixedRate 和 scheduleWithFixedDelay 方法,名字很像。在开发的时候可能不小心就用错了,但是其实两者还是有明显区别的。本篇文章准备用图解的方式,讲解两个方法的区别。

过滤器_WangMan_512的博客-程序员宅基地

过滤器基础知识        Filter 技术使用户可以改变一个request和修改一个response。 Filter 不是一个servlet,它不能产生一个response,它能够在一个request到达servlet之前预处理request,也可以在离开servlet时处理response。换种说法,filter其实是一个”servlet chaining”(servlet 链)。

Validform_weixin_30617737的博客-程序员宅基地

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><link rel="stylesheet" type="text/css" href="bootstrap3/cs...

【HBase】- HBase扫描表时报错 org.apache.hadoop.hbase.DoNotRetryIOException: hconnection-0x233fe9b6 closed_兀坐晴窗独饮茶的博客-程序员宅基地_donotretryioexception

描述for (String attendUid : attendUids) { // 范围 uid_ => uid_************ => uid| // 范围的获取是根据unicode码来判断 uid_ 小于 所有 uid_* 而 | 的unicode码比 _ 大 所以大于所有的 uid_.... ...

AES五种加密模式(CBC、ECB、CTR、OCF、CFB)_weixin_30610755的博客-程序员宅基地

分组密码有五种工作体制:1.电码本模式(ElectronicCodebookBook(ECB));2.密码分组链接模式(CipherBlockChaining(CBC));3.计算器模式(Counter(CTR));4.密码反馈模式(CipherFeedBack(CFB));5.输出反馈模式(OutputFeedBack(OFB))。以下逐一介绍一下:1.电码本模式(...

iOS常用第三方框架_whe0302的博客-程序员宅基地

1.jsonjson编码解码2.GTMBase64  base64编码解码3.TouchXML 解析4.SFHFKeychainUtils  安全保存用户密码到keychain中5.MBProgressHUD很棒的一个加载等待特效框架6.ASIHTTPRequest 等相关协议封装7.EGORefreshTableHeaderView 下拉刷新代码8.AsyncImag

随便推点

Find–atime –ctime –mtime的用法与区别总结_abcdef0966的博客-程序员宅基地

周五有同事问起find命令中-mtime n、-mtime –n以及-mtime +n的用法区别,当时虽然记得这里n是n个24个小时的意思,也是对所有这几个属性详细的用法却一知半解,索性周末仔细google并且实践了一番,终于理清楚了个中乾坤。find . –atime n        find . –ctimen            find . –mtime nfind . –at

python实现马科维茨模型的资本市场线_基于Python的马科维茨投资组合理论的实证研究..._weixin_39916360的博客-程序员宅基地

孙丽泊摘要:随着中国金融体系的逐步完善和大数据时代的到来,新技术在金融领域的应用不断深化。本文在马科维茨投资组合理论的基础上,借助Python工具,在20只来自不同行业的股票中选取5只进行了组合投资分析,通过实证得到夏普比率最大的最优投资组合及方差最小的最优投资组合,对它们的预期收益率、标准差及夏普比率进行对比分析,并给出资产组合的有效边界。通过实证分析,进一步说明马科维茨投资组合理论在金融风险管...

自增(increment)、自减(decrement)操作符前缀形式与后缀形式的区别_ManniEmma的博客-程序员宅基地_increment在c语言中的意思

转自侯捷翻译的《more effective c++》中文版很久以前(八十年代),没有办法区分++和--操作符的前缀与后缀调用。这个问题遭到程序员的报怨,于是C++语言得到了扩展,允许重载increment 和 decrement操作符的两种形式。    然而有一个句法上的问题,重载函数间的区别决定于它们的参数类型上的差异,但是不论是increment或decrement的前缀还是后缀都只

如何删除"自豪地采用WordPress"_chihuanweng7483的博客-程序员宅基地

见转载 转载于:https://my.oschina.net/u/3964246/blog/2243771

Oracle-10:分析函数_Qgee2013的博客-程序员宅基地

------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥-------------分析函数:分析函数,可以修改排序的规则!!!!!!!!!!!!!!!!!!!!!!!!首先把数据库脚本给放一下,供测试使用:create table DEPT( deptno NUMBER(2) not null, dname V...

百度地图调用报错Uncaught TypeError:Cannot read property 'fc' of undefined_less_cold的博客-程序员宅基地

百度地图调用出现这个错误,说明你的百度地图没有在页面加载完之后调用,而是在页面加载之前调用的。也就是下面这两行一定要在页面加载完之后进行调用 map = new BMap.Map("allmap",{maxZoom:8,minZoom:8}); map.centerAndZoom(new BMap.Point(122.825755,45.632862),8);

推荐文章

热门文章

相关标签