Gulp
㼛思雨
Web. Write Less,Do More
展开
-
项目中package.json文件的作用和node_modules文件夹不用传输的原因
新建一个descripton文件夹;执行npm init:就会发现descript里面会有一个package文件,保存的有当前项目信息。把package.json删除。然后一步生成:输入npm init -y即可;就又出现了:例如新加两个模块formidable和mime模块。package.json里面就会自动出现在dependencies里面。咱们可以把description里面的node_mdules删除。然后np...原创 2021-03-25 23:28:44 · 304 阅读 · 0 评论 -
Gulp之gulp-runSequece顺序执行任务同步异步操作
一开始用下面的方法,一直报错,无法得到想要的结果,经过大量的查询和文档查看,才清楚顺序执行的原理和同步异步的操作方法。//构建任务gulp.task('default',['htmlmin','cssmin','jsmin','copy']);方法一:我是先用的gulp4-run-sequence插件来实现顺序功能的,下面是npmjs.com里面的run-sequence安装和使用方法。实现代码://引用gulp模块const gulp=require("gul...原创 2021-03-25 21:48:57 · 410 阅读 · 0 评论 -
Gulp插件之复制文件夹操作
原创 2021-03-25 19:55:49 · 532 阅读 · 0 评论 -
Gulp 4: gulp.parallel gulp.series -- 全新的任务执行体系
Gulp 4 在任务执行体系上有一个很重要的改动,下面我们一起来看一下这个新的特性和如何从Gulp 3迁移到新版本Gulp 3中的任务执行链在了解新特性之前,让我们先看看之前是怎么做的。通常Gulp允许给task定义依赖(dependency),这保证了task执行之前它依赖的task已经获得执行。看下面代码: // 默认任务,执行scripts和styles这两个任务 gulp.task('default', ['scripts', 'styles'], function.转载 2021-03-25 15:00:40 · 1020 阅读 · 0 评论 -
Gulp插件之gulp-babel和gulp-uglify关于js代码的转换和压缩
原创 2021-03-25 09:18:55 · 545 阅读 · 0 评论 -
Gulp插件之gulp-less和gulp-csso用法
原创 2021-03-24 21:01:07 · 163 阅读 · 0 评论 -
Gulp学习之委以重任task函数做了什么事情
gulp.task()函数用来定义一个gulp要执行的任务。其格式如下gulp.task(name [, deps] [, fn])该函数有三个参数:name,deps和fnname任务的名称,字符串类型,这个参数是必须的。gulp.task('mytask')执行该任务gulp] # gulp mytaskStarting 'mytask'...Finished 'mytask' after 120 μs我们定义的这个任务其实什么也没有做。通常情况下是需要有一个回调函数.转载 2021-03-24 15:41:30 · 161 阅读 · 0 评论 -
gulp学习之你来我往 src和dest函数
作为一个前端构建工具,gulp无疑是我接触过的最简单易用的。其配置参数简单,并且学习起来也很容易。并且gulp使用的是nodejs的stream来操作数据的,所以运行效率也是比较高的。所以,之前没有使用过前端构建工具的同学,我个人还是建议学习一下gulp。gulp的API也比较简单,总共就提供给我们四个函数:gulp.src、gulp.dest、gulp.task和gulp.watch。本章我们来讨论src和dest函数。gulp.srcgulp底层是使用的nodejs的stream,首先获取到转载 2021-03-24 15:38:11 · 1254 阅读 · 0 评论 -
gulp中抽取公共文件gulp-file-include方法
进入官网进行查看使用方法:然后在powershell中下载gulp-file-include引入const fileinclude=require("gulp-file-include");加入任务中的.pipe(fileinclude())在src中创建common文件夹common中创建header.html文件把article.html和defalut.html中的头部公共文件删除。并复制一份到刚才新建的header.html中。...原创 2021-03-24 00:24:11 · 622 阅读 · 1 评论 -
Gulp插件之gulp htmlmin文件压缩操作
下面咱们进行gulp-htmlmin的操作。先进入npmjs官网,然后搜索gulp-htmlmin,里面有关于它的下载方法和用法。我们复制过来下载地址。把--save去掉,因为最新的可以没有--save。然后npm install gulp-htmlmin回车下载。下载好之后。然后复制使用代码到编辑器中。把下面这一行复制到任务代码中去任务名定义为htmlmin。直接gulp htmlmin调用运行任务。结果在dist中出现...原创 2021-03-23 23:15:46 · 150 阅读 · 0 评论 -
解决Gulp-cli安装成功运行却报错的问题
运行gulp命令行时,系统报错如下:怎么解决呢?1、首先打开Powershell以管理员身份运行。2.输入set-executionpolicy remotesigned回车然后输入Y即可。退出powershell重新用就可以了下面蓝色字是powershell上的内容,我在这里复制过来的。Windows PowerShell版权所有 (C) Microsoft Corporation。保留所有权利。尝试新的跨平台 PowerShell https://aka.ms...原创 2021-03-23 17:10:01 · 728 阅读 · 0 评论 -
node.js中第三方模块gulp的下载使用和gulp-cli的下载使用和报错解决方案
在node.js目录下先创建gulp-demo文件夹。然后在gulp-demo中创建src文件夹和dist文件夹找一个静态页面的所有代码文件放入src中,如下面所示:然后在gulp-demo中新建一个gulpfile.js文件。利用下面gulp提供的方法来进行操作。下面给出四个方法。还有一个run方法。需要直接查询即可。然后在powershell中运行。可是不能直接运行,为什么呢?因为如果使用node命令执行gulpfile.js执行的是整个文件...原创 2021-03-23 16:57:24 · 288 阅读 · 0 评论