- 综合排序
- 最热优先
- 最新优先
- 来自专栏一个会写诗的程序员的博客
Gulp 快速入门gulp API 文档
devDependencies": { "gulp": "^3.9.1", "gulp-browserify": "^0.5.1", "gulp-jade": "^1.1.0" } } gulpfile.js h1 Hello,World p This is a jade demo script(src='js/main.js') $ gulp jade [21:35:30] Using gulpfile ~/17lai/frontend-workflow/gulpfile.js [21:35:30] Starting 'jade'... [21:35:30] Finished 'jade' after 89 ms $ gulp js [21:35:56] Using gulpfile ~/17lai/frontend-workflow/gulpfile.js [21:35:56] Starting
97620发布于 2018-08-17 - 来自专栏全栈程序员必看
关于Glup_gulp使用教程
不要放在项目的其它子文件里，文件名就是“gulpfile.js”，不要乱起。 在gulpfile.js中实现如下代码： ** ① 复制文件：** （将开发目录拷贝到发布目录 均在本地） （其中 const 相当于int 定义变量 ） 随后在 cmd 命令行中输入 gulp 在cmd命令行输入 npm install gulp-uglify –save-dev //安装 gulp-uglify 插件 随后在gulpfile.js的文件中输入如下 （即将插件引入） * 的文件中输入const rename = require(“gulp-rename”); 后继续在gulpfile.js的文件中输入如下所示 （接着上面的合并） 随后再次启动监听 在cmd gulpfile.js的文件中所用插件的 ⑦ 编译sass 或 less 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。
1.2K50编辑于 2022-11-17 - 来自专栏有趣的django
Django打造大型企业官网（一） 一、nvm的安装二、gulp的安装和用法
生成一个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
1.2K40发布于 2019-06-14 - 来自专栏前端说吧
Gulp安装流程、使用方法及cmd常用命令导览
文件 8．安装gulp插件 9．配置gulpfile.js（9,8可以反过来，可以js文件中需要什么插件再装什么插件） 10．Gulp实践流程：配置gulpfile.js文件命令，下载、调用 gulpfile.js文件，他是gulp项目的配置文件，不同于backage.json文件。 （疑问：gulpfile.js的位置，可以随着不同的项目新建不同的文件，然后分别放到不同项目的根目录下？ 详解： var gulp = require(‘gulp’);//引入gulp组件，这一句是每一个gulpfile.js里边所必须有的，标配！！标配！！标配！！ 10．Gulp实践---使用gulpfile.js并调用gulp插件 gulpfile.js 一个gulpfile.js配置文件类似下边这段代码，他的大体结构都是差不多的，只是你用到的任务不同的时候，他就是不同的任务代码
3K60发布于 2018-05-17 - 来自专栏代码小睿
静态页面如何实现 include 引入公用代码
install gulp --save-dev 接着安装 gulp-file-include npm install gulp-file-include --save-dev 2、新建并配置 gulpfile.js 接着我们手动新建一个 js 文件取名为 gulpfile，并在里面写入如下代码： var gulp = require('gulp'); var fileinclude = require('gulp-file-include 创建项目目录结构，并添加测试代码 项目的整体目录结构应该是这样 app page include header.html footer.html index.html gulpfile.js 可能你已经能举一反三了，在 gulpfile.js 里，我们可以手动设置最终生成文件的位置，就是这句话 gulp.dest('dist') 5、自动编译 静态页面引入公用代码的问题已经解决了， gulp 有个 watch 方法，就是监听文件是否有变动的，我们只需稍微修改下 gulpfile.js 文件，增加一段监听代码，如下： var gulp = require('gulp'); var fileinclude
2.2K00发布于 2018-07-31 - 来自专栏Web 技术
【工具】gulp自动化构建工具入门教程
文件中自动写入所安装插件的版本号信息； 至此，我们就将gulp安装到我们的项目中啦~ ---- 具体应用——优化less、js、img文件 1.先在根目录D:\wampv\wamp\www\getgulp 新建一个gulpfile.js 的文件 gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件，所有的对项目文件的自动化操作将在这里面进行； 如图： 然后在根目录下新建一个gulp文件夹，并在gulp Config.js配置如下： Default.js如下： Less.js如下： Watch.js文件如下： 注意：在wacth.js文件中，我们需要先安装gulp-watch插件； 在gulpfile.js gulp.dest(‘输出路径’)//你所要输出结果的路径； gulp.Watch(‘监听路径’,[’任务名称’])//监听任务文件变化； 1.然后我们在gulpfile.js文件中就可以开始建立task 首先需要require以下gulp，这个是所有gulp操作的基础，然后引入相关的gulp插件 如图： 为了捕获操作中的异常，我们就需要先安装两个插件gulp-notify和gulp-plumber，然后在gulpfile.js
1K30编辑于 2023-10-07 - 来自专栏代码小睿
静态页面如何实现 include 引入公用代码
install gulp --save-dev 接着安装 gulp-file-include npm install gulp-file-include --save-dev 2、新建并配置 gulpfile.js 接着我们手动新建一个 js 文件取名为 gulpfile，并在里面写入如下代码： var gulp = require('gulp'); var fileinclude = require('gulp-file-include 创建项目目录结构，并添加测试代码 项目的整体目录结构应该是这样 app page include header.html footer.html index.html gulpfile.js 可能你已经能举一反三了，在 gulpfile.js 里，我们可以手动设置最终生成文件的位置，就是这句话 gulp.dest('dist') 5、自动编译 静态页面引入公用代码的问题已经解决了，但每次编写源 gulp 有个 watch 方法，就是监听文件是否有变动的，我们只需稍微修改下 gulpfile.js 文件，增加一段监听代码，如下： var gulp = require('gulp'); var fileinclude
2.3K60发布于 2018-01-11 - 来自专栏meishadevs的前端专栏
使用Gulp
，并且在gulpfile.js中添加下面的代码 Gulp主文件用于注册任务 //载入gulp模块 var gulp = require('gulp'); /** * 注册一个任务 * @param title>Document</title> </head> <body>
这是一个简单的web页面
</body> </html> 3.创建一个Gulp的主文件gulpfile.js ，并且在gulpfile.js中添加下面的代码 //载入gulp模块 var gulp = require('gulp'); //文件拷贝任务 gulp.task('copy', function() width: 1028px; .row { padding: 0 15px; } } } 4.创建一个Gulp的主文件gulpfile.js ，并且在gulpfile.js中添加下面的代码 //载入gulp模块 var gulp = require('gulp'); var less = require('gulp-less'); //创建一个将1.1K30编辑于 2023-04-13 - 来自专栏Web技术学苑
放弃webpack,拥抱gulp
init -y 然后在public目录下新建images、css、js、index.html 文件结构，大概就这样 然后在安装gulp npm i gulp --save-dev 在根目录下新建gulpfile.js = defaultTask; 然后我们在命令行执行 npx gulp 当我们执行npx gulp时会默认运行gulpfile.js导出的default,在gulpfile.js导出的任务会注册到 ... exports.default = defaultTask; 公有任务taskJS // gulpfile.js const { src, dest } = require('gulp'); 重新组织gulpfile 最后我们可以再重新组织一下gulpfile.js，因为多个任务写在一个文件里貌似不太那么好维护，随着业务迭代，会越来越多，因此，有必要将任务分解一下 在根目录新建task，我们把所有的任务如下 中，我们修改下 // gulpfile.js const { series } = require('gulp'); const { injectHtml, taskDevServer, taskHtml
1.2K10编辑于 2022-07-28 - 来自专栏毛利学Python
前端开发使用工具 gulp
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 r.push(r[u-1]+r[u-2]),u++;return r} html 压缩 npm install gulp-htmlmin --save-dev 新建html文件夹在新建index.html gulpfile.js
1.6K10发布于 2019-09-03 - 来自专栏互联网杂技
Laravel中运行Gulp任务的利器（一） —— Laravel Elixir简介及入门教程
3、Elixir快速入门 创建第一个Elixir任务 Laravel项目包含了一个默认的 gulpfile.js ，该文件定义了Elixir版的Gulp任务。 你可以通过在项目根目录下运行 gulp 命令来执行定义在 elixir 方法中的任务： $ gulp [13:16:18] Using gulpfile ~/Software/dev.todoparrot.com /gulpfile.js [13:16:18] Starting 'default'... [13:16:18] Starting 'less'... [13:16:19] Finished 'default elixir(function(mix) { mix.less('app.less').coffee();}); 保存修改并再次运行 gulp ： $ gulp [14:40:25] Using gulpfile ~/Software/dev.todoparrot.com/gulpfile.js [14:40:25] Starting 'default'...[14:40:25] Starting 'less'
2.7K91发布于 2018-04-03 - 来自专栏乱码李
Gulp 快速入门
npm install --global gulp 作为项目的开发依赖（devDependencies）安装： $ npm install --save-dev gulp 在项目根目录下创建一个名为 gulpfile.js (3) 手动使用 babel 转译： $ babel src -d lib (4) 安装 gulp-babel $ npm install --save-dev gulp-babel (5) 编写 gulpfile 在根目录新建一个 gulpfile.babel.js 文件。 gulp 原生并不支持 ES6 语法，但是我们可以告诉 gulp 使用 babel 将 gulpfile 转换为 ES5，方法就是将 gulpfile 命名为 gulpfile.babel.js。 (6) 使用 ES6 编写 gulpfile.babel.js import gulp from 'gulp'; import babel from 'gulp-babel'; // 语法转化+压缩 gulp.task
1.1K10发布于 2021-11-26 - 来自专栏一路向前端
gulp + gulp-better-rollup + rollup 构建 ES6 开发环境
rollup-plugin-babel 安装 babel 核心插件: $ npm install --save-dev @babel/core @babel/preset-env 安装完成后，配置 .babelrc 文件和 gulpfile.js browsers": "last 2 versions, > 1%, ie >= 9" }, "modules": false } ] ] } 新建 gulpfile.js plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 2 } ] ] } 同时修改 gulpfile.js $ npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs 在修改 gulpfile.js 文件如下： const gulp-sourcemaps 和 rollup-plugin-uglify 插件： npm install --save-dev gulp-sourcemaps rollup-plugin-uglify 修改 gulpfile.js
1.4K20发布于 2019-09-04 - 来自专栏方球
vue3.0 + ts 打包ui组件
背景 技术栈 ： antdv TS Vue3.0 目录 root vue.config.js script 打包脚本 gulpfile.js components 组件源文件 src 测试用例 配置打包命令 /script/gulpfile.js default", // 类型生成 "types": "gulp -f . /script/gulpfile.js types", // vue 打包命令 "lib": "vue-cli-service build --target lib --name zz-ui /zz-ui.umd.min.js", // 打包压缩版 "types": "lib/types/index.d.ts" // 类型定义入口 } 这里主要配置包的基础信息, 提供npm使用 gulpfile.js
2K20发布于 2020-11-26 - 来自专栏从零开始学自动化测试
node.js 使用教程-1.使用gulp-file-include插件，实现html复用
gulp-file-include npm install gulp-file-include --save-dev 官方教程https://www.npmjs.com/package/gulp-file-include 配置gulpfile.js 项目下新增gulpfile.js 文件，配置内容 //提示require找不到就加下面这2行 //import { createRequire } from 'module'; //const require }); 使用示例 项目结构 └─dist └─src ├─include └─foot.html └─top.html └─index.html └─gulpfile.js
1K10编辑于 2022-09-22 - 来自专栏HTML5学堂
前端工程化 | 揭秘程序员的提速“外挂”
首先当然要先安装Node.js，通过Node.js全局安装Gulp和项目安装Gulp，其次在项目里安装需要使用的Gulp插件，然后新建Gulp的配置文件gulpfile.js来定义Gulp要处理的操作/ 3.1 流程： 3.1.1 安装Node.js -> 3.1.2 全局安装Gulp -> 3.1.3 项目安装Gulp -> 3.1.4 项目安装Gulp插件 -> 3.1.5 配置gulpfile.js 3.1.5 配置gulpfile.js 说明：gulpfile.js是Gulp的配置文件，放置于项目根目录的js文件。 说明：在这里我们要运行gulpfile.js定义好的gulp_less任务，执行的命令是gulp gulp_less。 ? ? 4 命令行的简单介绍 cd命令定位到具体的目录：cd + 路径。
1.6K110发布于 2018-03-13 - 来自专栏从零开始学自动化测试
node.js 使用教程-3.gulp-file-include 详细教程
label>@@name</label> <label>@@age</label> @@socials.fb @@socials.tw gulpfile.js body> </html> view.md # 环境 vscode # 环境准备 1.安装 > npm install gulp -g 2.安装md插件 > npm install markdown gulpfile.js ('some.html', { "nav": true }) @@if (name === 'test' && nav === true) { @@include('test.html') } gulpfile.js } }); for 使用 index.html
-
@@for (var i = 0; i < arr.length; i++) {
- `+arr[i]+` }
91910编辑于 2022-09-22 - 来自专栏各类技术文章~
Gulp 自动化构建案例
es5 图片压缩 scss编译 模板html编译 安装gulp yarn add gulp --dev 复制代码 安装完毕之后我们就开始进入正题 样式编译 首先我们使用gulp进行scss的样式编译 gulpfile.js 的基准输出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
1.7K20编辑于 2021-12-08 - 来自专栏Akilarの糖果屋
Butterfly主题的PWA实现方案
创建gulpfile.js 在Hexo的根目录，创建一个gulpfile.js文件,打开[Blogroot]/gulpfile.js, 输入 创建在Hexo的根目录，创建一个sw-template.js 安装全套压缩插件 将[Blogroot]/gulpfile.js里的内容修改为： 使用了gulp压缩js以后，使用了冰卡诺老师的gitcalendar和本站的右键环形菜单教程的用户，会发现gitcalendar 修改[Blogroot]/gulpfile.js,添加屏蔽项。
1.9K20发布于 2021-06-11 - 来自专栏极客编程
基于Node.js的自动化工具Gulp
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.课程练习环境 (1)在右面的编辑环境中点击【文件管理】，就可以看到我们上图已经为大家创建的目录结构； (2)然后我们就可以对gulpfile.js文件进行编辑（双击），编辑完成后点击【保存文件】；
2K10发布于 2018-09-04
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号