gulp 自动化管理工具实现全过程
1.全局安装gulp
npm install gulp -g
2.项目内安装gulp
npm install gulp -s
3.项目根目录新建gulpfile.js
js内代码:
//载入gulp核心包
const gulp = require('gulp');
//引入http服务器
const connect = require('gulp-connect');
//引入less文件
const less = require('gulp-less');
// (任务名,任务执行函数)
gulp.task('hello', async() =>{
console.log('hello itTest');
//这里编写重复性的流程
}); //拷贝文件
// gulp.task('dest', async() =>{
// //获取文件
// gulp.src('src/**/*.*')
// //pipe让文件流走向下一个环节
// .pipe(gulp.dest('dist/'));//括号内为拷贝至目标目录 ... *表示任意的通配符,*/表示任意目录文件下的任意文件夹 **/表示递归获取该目录下所有的文件夹(针对文件夹套文件夹的情况)
// });
//less转换
gulp.task('style',async() =>{
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('src/css/'))
.pipe(connect.reload());
});
//html文件
gulp.task('html',async() =>{
gulp.src('src/**/*.html')
.pipe(connect.reload());
});
//js文件
gulp.task('js',async()=>{
gulp.src('src/**/*.js')
.pipe(connect.reload());
});
//监视less文件
gulp.task('watch',async() =>{
gulp.watch('src/less/*.less', gulp.series('style'));
gulp.watch('src/**/*.html', gulp.series('html'));
gulp.watch('src/**/*.js', gulp.series('js'));
});
//创建服务器
gulp.task('server',async() =>{
//创建服务器默认监听8080端口
connect.server({
root: 'src',
livereload: true,
port:'9002'
});
});
//默认任务
gulp.task('default', gulp.series('server', 'watch'));
// gulp.task('load',async() =>{
// gulp.src('src/*')
// .pipe(connect.reload())
// })
//通过命令行输入gulp+任务名运行任务,默认任务可直接通过命令行直接输入gulp回车执行。
//gulp原生不支持任何功能,只提供最基础api
4.终端输入gulp+指令,命令执行。
gulp 自动化管理工具实现全过程的更多相关文章
- gulp自动化构建工具的使用
gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...
- Ansible批量自动化管理工具(二)
Ansible批量自动化管理工具(二) 链接:https://pan.baidu.com/s/1A3Iq3gGkGS27L_Gt37_I0g 提取码:ncy2 复制这段内容后打开百度网盘手机App,操 ...
- gulp自动化构建工具
gulp 自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/ 中文网 http://gulpjs.com/plugins/ 英文网 ...
- gulp自动化构建工具安装使用(1)
我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...
- Gulp(自动化构建工具 )
前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1. 压缩js 2. 压缩css 3. 压缩less 4. 压缩图片 等等… 我们完全可以利用Gulp ...
- 1.Ansible自动化管理工具
1.Ansible基本概述 Ansible是一个IT自动化的配置管理工具,自动化主要体现在Ansible集成了丰富模块,丰富的功能组件, 可以通过一个命令行完成一系列的操作.进而能减少我们重复性的工作 ...
- Chocolatey 简介(软件自动化管理工具)
一.Chocolatey 管理Windows软件的明智方法 1.建立在技术的无人值守安装和PowerShell.建立在技术的无人值守安装和PowerShell. 2.轻松管理Windows软件的所有方 ...
- Ansible批量自动化管理工具
一,工具与环境介绍 1.1 ansible简介 批量管理服务器的工具 无需部署agent,通过ssh进行管理 流行的自动化运维工具:https://github.com/ansible/ansible ...
- ANSIBLE自动化管理工具
ansible 基础 自动化运维工具 官网:https://www.ansible.com/ 官方文档:https://docs.ansible.com/ ansible 特性 1. 模块化:调用特定 ...
随机推荐
- [Advanced Python] 14 - "Generator": calculating prime
高性能编程 几个核心问题 • 生成器是怎样节约内存的?• 使用生成器的最佳时机是什么?• 我如何使用 itertools 来创建复杂的生成器工作流?• 延迟估值何时有益,何时无益? From: htt ...
- JavaScript之基本概念(二)
今天主要介绍两个东西:JS标识符和数据类型 一 变量和常量 在介绍标识符之前有必要先了解一下JS中的变量和常量. 变量:程序执行期间可操作的临时存储数据的内存空间. 声明方式: var:函数作用域,变 ...
- hihttps教你在Wireshark中提取旁路https解密源码
大家好,我是hihttps,专注SSL web安全研究,今天本文就是教大家怎样从wireshark源码中,提取旁路https解密的源码,非常值得学习和商业应用. 一.旁路https解密条件 众所周知, ...
- 【原创】(六)Linux内存管理 - zoned page frame allocator - 1
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...
- 004-python面向对象,错误,调试和测试
---恢复内容开始--- 1.面向对象 面向对象编程——Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作 ...
- eShopOnContainers学习系列(一):Swagger的使用
最近在看eShopOnContainer项目,抽取一下其中的基础知识点,做个记录,有兴趣的可以看下. 新建一个.net core API项目,添加Nuget包 Swashbuckle.AspNetCo ...
- Nginx开启Gzip压缩提升页面加载速度
1.在 nginx 的conf 目录下新建 gzip.conf 文件 #开启gzip压缩 gzip on; #设置允许压缩的页面最小字节数 gzip_min_length 1k; #申请4个单位为16 ...
- 在chrome浏览器中调用IE浏览器并访问(openIE.reg自定义协议)
在谷歌浏览器中有4种方法调用IE浏览器.如下: c++ socket通过浏览器在ie中打开指定url : vb生成exe,url访问exe启动ie并打开指定url : 通过socket实现通过http ...
- Android4.4 RIL软件框架
本文主要对android4.4 RIL的telephony与modem的命令交互流程进行分析,当然本文不是重点介绍telephony.telephony涉及具体业务逻辑内容比较多,包括sim.dail ...
- linux 基本操作积累
1 sed 命令,替换含有指定字符的一整行数据 sed -i 's/原字符串/替换后的字符串/g' ./文件名 (此命令会全局替换[整个文件内替换]原字符串) sed -i.bak 's/原字符串/替 ...