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. 模块化:调用特定 ...
随机推荐
- 客户端与服务端的事件watcher源码阅读
watcher存在的必要性 举个特容易懂的例子: 假如我的项目是基于dubbo+zookeeper搭建的分布式项目, 我有三个功能相同的服务提供者,用zookeeper当成注册中心,我的三个项目得注册 ...
- 【面试必备】小伙伴栽在了JVM的内存分配策略。。。
周末有小伙伴留言说上周面试时被问到内存分配策略的问题,但回答的不够理想,小伙伴说之前公号里看过这一块的文章的,当时看时很清楚,也知道各个策略是干嘛的,但面试时脑子里清楚,心里很明白,但嘴里就是说不清楚 ...
- jenkins上下游工程以及空间占用处理
1.最近项目架构调整,把十几个java项目整合为一个大的项目,这样构建上游工程成功后下游工程会自动构建 解决如下:取消这个勾选即可 2.构建单个项目时,会把所有子工程都打包一次 解决如下:指定构建时的 ...
- 1,eclipse导入项目jdk版本不一样解决方案 2,java报javax.servlet.jsp cannot be resolved to a type
一:eclipse导入项目jdk版本不一样解决方案 参考博文: https://www.cnblogs.com/chenmingjun/p/8472885.html 选中项目右键 --> Pro ...
- 设计模式-Builder和Factory模式区别
Builder和Factory模式区别 Builder模式结构: Factory模式一进一出,Builder模式是分步流水线作业.当你需要做一系列有序的工作或者按照一定的逻辑来完成创建一个对象时 Bu ...
- JavaScript系列:高级函数篇
前言: 本篇主要是介绍 JavaScript使用函数的高级方法,函数是JavaSCript中最有趣的部分,利用Function特性可以编写出很多非常有意思的代码,本篇主要包括:函数回调,高阶函数以及函 ...
- ARP攻击原理简析及防御措施
0x1 简介 网络欺骗攻击作为一种非常专业化的攻击手段,给网络安全管理者,带来严峻的考验.网络安全的战场已经从互联网蔓延到用户内部的网络, 特别是局域网.目前利用ARP欺骗的木马病毒在局域网中广泛传 ...
- node.js操作数据库之MongoDB+mongoose篇
前言 node.js的出现,使得用前端语法(javascript)开发后台服务成为可能,越来越多的前端因此因此接触后端,甚至转向全栈发展.后端开发少不了数据库的操作.MongoDB是一个基于分布式文件 ...
- Java编程思想——第17章 容器深入研究 读书笔记(二)
五.List的功能方法 排除Collection已包含的方法外还增加了 boolean addAll(int index, Collection<? extends E> c);从索引位置 ...
- STM32SPI连续读写多个字节会产生时间间隔
最近在做一个音频芯片的项目用到SPI接口配置寄存器,发现只要连续两次向从机发送(接收)帧,当STM32处于主机模式时,这两帧数据中间会产生一个时钟的间隙. 起初我想能不能利用状态标志来去除间隙,后来怎 ...