不要放在项目的其它子文件里，文件名就是“gulpfile.js”，不要乱起。...在gulpfile.js中实现如下代码： ** ① 复制文件：** （将开发目录拷贝到发布目录 均在本地） （其中 const 相当于int 定义变量 ） 随后在 cmd 命令行中输入 gulp...在cmd命令行输入 npm install gulp-uglify –save-dev //安装 gulp-uglify 插件 随后在gulpfile.js的文件中输入如下 （即将插件引入） *...**随后在cmd中输入 gulp copy-html 然后输入 gulp uglifyjs 缺点 ：复制html文件+压缩js文件的方法在每次更改代码都要运行如上两条命令，过于繁琐，因此采用监听文件的方法...gulpfile.js的文件中所用插件的 ⑦ 编译sass 或 less 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。
创建一个code文件夹，并进入到code文件夹下 下面的命令是在Git bash中运行的，运行这几条命令，需要安装Git，没有安装Git的可以在电脑上自己手动创建一个code文件夹，并且进入code文件夹下...# 创建code文件夹 mkdir code # 进入code文件下 cd code 3.执行下面的命令创建package.json文件 npm init 在命令行中运行npm init命令的时候会出现下图所示的要求用户输入...，并且在gulpfile.js中添加下面的代码 Gulp主文件用于注册任务 //载入gulp模块 var gulp = require('gulp'); /** * 注册一个任务 * @param...，并且在gulpfile.js中添加下面的代码 //载入gulp模块 var gulp = require('gulp'); //文件拷贝任务 gulp.task('copy', function()...文件拷贝到dist目录下 gulp copy 文件拷贝命令执行完成后可以看到在code目录下自动创建了一个dist文件夹，并且在dist文件夹下自动创建了一个index.html文件，表示文件拷贝任务运行成功
任务，最后通过Gulp的命令运行定义好要执行的任务（操作）。...-> 3.1.6 运行Gulp定义好的任务 3.1.1 安装Node.js -> 说明：因为Gulp是基于Node.js构建的，所以需要安装Node.js。...解决方法是用管理员权限运行此文件，鼠标右击window图标，点击命令提示符（管理员）。之后把你的安装包所在路径输入进去就行了，这样打开安装包就不会报错了。 ? ?...3.1.5 配置gulpfile.js 说明：gulpfile.js是Gulp的配置文件，放置于项目根目录的js文件。...说明：在这里我们要运行gulpfile.js定义好的gulp_less任务，执行的命令是gulp gulp_less。 ? ? 4 命令行的简单介绍 cd命令定位到具体的目录：cd + 路径。
browsers": "last 2 versions, > 1%, ie >= 9" }, "modules": false } ] ] } 新建 gulpfile.js...gulp.series("babel")) }) gulp.task("default", gulp.series(["babel", "watch"])) 在 src 目录下使用 ES6 语法新建 js 文件，然后运行...@babel/runtime（此处指@babel/runtime-corejs2）实现运行时编译到您的构建中。...plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 2 } ] ] } 同时修改 gulpfile.js...$ npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs 在修改 gulpfile.js 文件如下： const
压缩css npm install gulp-terser --save-dev # 压缩js npm install gulp-fontmin --save-dev # 压缩字体包 为Gulp创建gulpfile.js...在博客根目录[Blogroot]下新建gulpfile.js,打开[Blogroot]\gulpfile.js,输入以下内容： //用到的各个插件 var gulp = require('gulp');...var text = Buffer.concat(buffers).toString('utf-8'); minifyFont(text, cb); }); }); // 运行...命令时依次执行以下任务 gulp.task('default', gulp.parallel( 'compress', 'minify-css', 'minify-html','mini-font' )) 在每次运行完...hexo generate生成静态页面后，运行gulp对其进行压缩。
= defaultTask; 然后我们在命令行执行 npx gulp 当我们执行npx gulp时会默认运行gulpfile.js导出的default,在gulpfile.js导出的任务会注册到...public/css/*.less')).pipe(less()).pipe(dest(pathDir('dist/css'))) } exports.taskLess = taskLess; 命令行运行...images'))) } exports.taskImage = taskImage; 一顿操作发现，最新版本不支持esm,所以还是降低版本版本，这里降低到6.2.1版本，这里只能使用ejs方式 然后运行...appDom.innerHTML = 'hello gulp'; const fn = () => { console.log('公众号：Web技术学苑，好好学习，天天向上') } fn(); 运行.../dist' } }) } exports.taskDevServer = taskDevServer; 当我们运行npx gulp taskDevServer时，浏览器会默认打开http
运行hexo clean之后hexo generate,使用hexo server本地查看或者hexo deploy部署到网站上。...创建gulpfile.js 在Hexo的根目录，创建一个gulpfile.js文件,打开[Blogroot]/gulpfile.js, 输入 创建在Hexo的根目录，创建一个sw-template.js...运行以下指令 运行hexo g之后必须运行gulp指令，不然PWA不会生效！ 拓展内容，使用GULP压缩静态资源 既然已经装了gulp了，干脆把gulp也配置好吧。...修改[Blogroot]/gulpfile.js,添加屏蔽项。...运行gulp指令时报错： 这个众说纷纭，一个是说插件安装不对，一个是说和nvm版本不兼容，通过github action使用CI安装时并不会报这个错，推测是nvm版本不兼容。
global gulp （2）安装插件 $ npm install --global gulp-imageisux （3）创建测试项目 test | |-- img |-- test.jpg |-- gulpfile.js...gulpfile.js内容 var gulp = require('gulp'); var imageisux = require('gulp-imageisux'); gulp.task('default...imageisux('',true)); }); 注： imageisux方法有两个参数 第一个参数为存放压缩后图片的路径，为空时默认生成dest webp两个目录 第二个参数为是否生成webp图片 （4）运行...在项目目录下执行 $ gulp 运行完成后，img目录下会自动生成两个目录：dest、webp，分别存放压缩后的jpg图片，和webp图片
nodejs gulp gulp入门 npm init 项目初始化 ，此时根目录会出现package.json npm install gulp --save-dev 在本地项目局部安装gulp 创建gulpfile.js...在本地项目安装gulp-cssnano 新建一个css文件夹，在新建index.css *{ margin: 0; padding: 0; } p{ color: red } gulpfile.js...index.css *{margin:0;padding:0}p{color:red} gulp 修改压缩的文件名 npm install gulp-rename --save-dev 在本地项目安装 gulpfile.js...else{ fibarr.push(fibarr[i-1] + fibarr[i-2]) } i++; } return fibarr; } gulpfile.js...使用gulp 压缩代码能使项目运行更加的流畅。 ? 最后，祝有所学习，有所成长
文件 8．安装gulp插件 9．配置gulpfile.js（9,8可以反过来，可以js文件中需要什么插件再装什么插件） 10．Gulp实践流程：配置gulpfile.js文件命令，下载、调用...gulpfile.js文件，他是gulp项目的配置文件，不同于backage.json文件。...（疑问：gulpfile.js的位置，可以随着不同的项目新建不同的文件，然后分别放到不同项目的根目录下？...10．Gulp实践---使用gulpfile.js并调用gulp插件 gulpfile.js 一个gulpfile.js配置文件类似下边这段代码，他的大体结构都是差不多的，只是你用到的任务不同的时候，他就是不同的任务代码...所谓的默认任务: 他只有唯一的名字就是default 也就是说，只要你有一个任务定义了名字是default，那么你直接运行gulp或者gulp+任务名（比如这里用gulp sass）的方式运行，他都会率先执行你
install gulp --save-dev 接着安装 gulp-file-include npm install gulp-file-include --save-dev 2、新建并配置 gulpfile.js...创建项目目录结构，并添加测试代码 项目的整体目录结构应该是这样 app page include header.html footer.html index.html gulpfile.js...'include/header.html') 页面主体部分 @@include('include/footer.html') 4、运行...可能你已经能举一反三了，在 gulpfile.js 里，我们可以手动设置最终生成文件的位置，就是这句话 gulp.dest('dist') 5、自动编译 静态页面引入公用代码的问题已经解决了，但每次编写源...gulp 有个 watch 方法，就是监听文件是否有变动的，我们只需稍微修改下 gulpfile.js 文件，增加一段监听代码，如下： var gulp = require('gulp'); var fileinclude
gulp的使用 1.建立gulpfile.js文件 gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。...新建一个文件名为gulpfile.js的文件，然后放到你的项目目录中。之后要做的事情就是在gulpfile.js文件中定义我们的任务了。...下面是一个最简单的gulpfile.js文件内容示例，它定义了一个默认的任务。...2.运行gulp任务 要运行gulp任务，只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具)，然后在命令行中执行gulp命令就行了，gulp...(3)最后在终端中转到我们的项目目录，运行gulp命令，这样就可以在终端中查看结果了。
通过工具自动化运行大量单调乏味、重复性的任务，比如图像压缩、文件合并、代码压缩、单元测试等等，可以为开发者节约大量的时间，使我们能够专注于真正重要的、有意义的工作，比如设计业务逻辑，编写代码等等。...---- 在前端项目中配置 Gulp.js 要在你的项目中使用 Gulp, 有几个关键的步骤需要完成： 安装两个依赖包 安装你需要的任意插件 创建 gulpfile.js 文件，在其中定义你要运行的任务...---- Gulpfile.js 文件 与 Grunt 一样， Gulp 也有一个同名配置文件，叫做 gulpfile.js, 在这个文件里定义需要用到什么插件，执行什么任务，如何执行等等。...gulpfile.js 的语法非常简单直接，具有非常好的可读性，便于理解。...接下来，我们要定义需要 Gulp 去运行的任务。
install gulp --save-dev 接着安装 gulp-file-include npm install gulp-file-include --save-dev 2、新建并配置 gulpfile.js...创建项目目录结构，并添加测试代码 项目的整体目录结构应该是这样 app page include header.html footer.html index.html gulpfile.js...'include/header.html') 页面主体部分 @@include('include/footer.html') 4、运行...可能你已经能举一反三了，在 gulpfile.js 里，我们可以手动设置最终生成文件的位置，就是这句话 gulp.dest('dist') 5、自动编译 静态页面引入公用代码的问题已经解决了，...gulp 有个 watch 方法，就是监听文件是否有变动的，我们只需稍微修改下 gulpfile.js 文件，增加一段监听代码，如下： var gulp = require('gulp'); var fileinclude
生成一个package.json npm install gulp -g 全局 npm install gulp --save-dev 本地 2.创建gulp任务 在项目根目录创建 gulpfile.js...3.创建css处理文件任务 主要对css文件进行压缩，然后再将压缩的文件放到指定目录 安装插件 npm install cssnano --save-dev gulpfile.js代码 var gulp.../dest/css/")) done(); }) 4.修改文件名 安装插件 npm install gulp-rename --save-dev gulpfile.js var cssnano.../dest/css/")) done(); }) 5.创建处理js文件的任务 安装插件 npm install gulp-uglify --save-dev gulpfile.js var uglify.../dest/js/")) done(); }) 6.合并多个文件 安装插件 npm install gulp-concat --save-dev gulpfile.js var uglify
第一: gulp必须在nodejs环境下运行，所以要先搭建nodejs环境。 测试nodejs是否安装正常。...这个文件保存项目的相关信息 第二: npm install gulp -g 安装全局gulp 然后在项目里的根目录再安装一遍 npm install gulp –save-dev 第三: 新建一个gulpfile.js...npm install gulp-uglify –save-dev 重名名插件： npm install gulp-rename –save-dev 再安装一下npm install jslint 然后在gulpfile.js
环境准备 gulp 是基于node 运行的，使用npm 全局安装 npm install -g gulp 安装gulp依赖包,因为在上线后是不需要这个包的，所以将这个项目安装在开发依赖： npm install...gulp-uglify 项目初始化 创建项目 web └─dist └─src ├─css ├─js └─main.js └─index.html └─gulpfile.js...npm init -y package.json内容 gulpfile.js 文件需要自己在项目根目录下新建，整个目录结构如下 使用 gulp 压缩 JS 压缩 js 代码可降低 js 文件大小，提高页面打开速度...在 gulpfile.js 中编写代码 var gulp = require('gulp'); // 导入gulp var uglify = require('gulp-uglify');... (D:\code\web\gulpfile.js:31:6) at Module.
gulp-typescript": "^2.10.0", "typescript": "^1.7.5" } } 保存文件， VS 会自动下载相应的 NPM 包; 2、 定义编译 ts 任务 打开 gulpfile.js...pipe(ts()) .pipe(gulp.dest('wwwroot/app')); }); 现在在 Task Runner Explorer 就能看到这个名称为 tsc 的任务了， 运行一下...， 果然在 wwwroot/app 目录下生成了对应的 js 文件， 前进了一大步； 3、 实现自动编译 但是每次都运行这个任务还是太麻烦了， 我们的目标是能够自动编译 ts 文件， 这就需要使用 gulp.watch...= gulp.src('app/**/*.ts') .pipe(ts(tsProj)) .pipe(gulp.dest('wwwroot/app')); }); 现在运行...最终的 gulpfile.js 内容如下： var gulp = require('gulp'); var ts = require('gulp-typescript'); var tsProj = ts.createProject
安装成功检测版本号, gulp 3.9.1 gulp@4 => 安装成功检测版本号, gulp cli 2.3.0 gulp 全局工具安装完毕 能给你的电脑提供一个启动 gulp 的环境 私人: 可以再 cmd 里面运行...准备一个 gulpfile.js 的文件 + 必须有 + gulp 进行打包的依据 + 每一个项目需要一个 gulpfile.js + 我们再这个文件里面进行本项目的打包配置 + gulp...再运行的时候, 会自动读取 gulpfile.js 文件里面的配置 + 按照你再 gulpfile.js 文件里面的配置进行打包工作 + 注意: **直接写在项目根目录, 和 src 同级**...再 gulpfile.js 里面书写配置文件 + 书写你该项目的打包流程 + 书写完毕以后, 按照打包流程去执行 gulp 指令运行 gulpfile.js 文件 源码和打包以后的内容...gulp package.json 记录的第三方依赖 + dependencies => 表示的你项目的 项目依赖 => 比如 jquery, swiper => 指项目运行需要用到的内容
es5 图片压缩 scss编译 模板html编译 安装gulp yarn add gulp --dev 复制代码 安装完毕之后我们就开始进入正题 样式编译 首先我们使用gulp进行scss的样式编译 gulpfile.js...return src('src/assets/styles/*.scss') .pipe(dest('dist')) } module.exports = { style } 复制代码 运行测试...的基准输出assets/stylesxxx.scss文件 当然我们还需要进行scss的转换，安装 yarn add sass gulp-sass --save-dev 复制代码 然后我们再进行一下改造 gulpfile.js...脚本编译 在进行编写之前我们需要先引入： yarn add gulp-babel --dev yarn add @babel/core @babel/preset-env --dev 复制代码 然后gulpfile.js...: { sass: () => { return sass } } }) 复制代码 热更新 不多比比直接上 npm i browser-sync --dev 复制代码 gulpfile.js
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
