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 自动化管理工具实现全过程的更多相关文章

  1. gulp自动化构建工具的使用

    gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...

  2. Ansible批量自动化管理工具(二)

    Ansible批量自动化管理工具(二) 链接:https://pan.baidu.com/s/1A3Iq3gGkGS27L_Gt37_I0g 提取码:ncy2 复制这段内容后打开百度网盘手机App,操 ...

  3. gulp自动化构建工具

    gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ...

  4. gulp自动化构建工具安装使用(1)

    我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...

  5. Gulp(自动化构建工具 )

    前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp ...

  6. 1.Ansible自动化管理工具

    1.Ansible基本概述 Ansible是一个IT自动化的配置管理工具,自动化主要体现在Ansible集成了丰富模块,丰富的功能组件, 可以通过一个命令行完成一系列的操作.进而能减少我们重复性的工作 ...

  7. Chocolatey 简介(软件自动化管理工具)

    一.Chocolatey 管理Windows软件的明智方法 1.建立在技术的无人值守安装和PowerShell.建立在技术的无人值守安装和PowerShell. 2.轻松管理Windows软件的所有方 ...

  8. Ansible批量自动化管理工具

    一,工具与环境介绍 1.1 ansible简介 批量管理服务器的工具 无需部署agent,通过ssh进行管理 流行的自动化运维工具:https://github.com/ansible/ansible ...

  9. ANSIBLE自动化管理工具

    ansible 基础 自动化运维工具 官网:https://www.ansible.com/ 官方文档:https://docs.ansible.com/ ansible 特性 1. 模块化:调用特定 ...

随机推荐

  1. 浅谈Linux进程管理

    一  查看系统进程 在linux中,查看系统进程的命令为ps,常用格式为如下两个: (1)ps aux:unix格式查看系统进程 (2)ps -le:linux格式查看系统进程 一般地,ps aux更 ...

  2. JSR303 后端校验包的使用

    1.首先通过Maven导入JSR303架包. <!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate- ...

  3. 暑期——第八周总结(1,安装好hadoop之后访问http://localhost:50070,无法连接【已解决】 2,Hbase命令详解)

    所花时间:7天 代码行:800(Java) 博客量:1篇 了解到知识点 : 一:http://localhost:50070无法访问 安装好hadoop之后 输入所有东西都有 可就是访问50070无法 ...

  4. supervisor 启动ElasticSearch报错问题

    在/etc/elasticsearch/conf.d/新建一个es的配置文件,elasticsearch.conf,这里碰到一个小坑,网上很多文章介绍的是elasticsearch.ini,启动发现找 ...

  5. 用Python构造ARP请求、扫描、欺骗

    目录 0. ARP介绍 1. Scapy简述 2. Scapy简单演示 2.1 安装 2.2 构造包演示 2.2.1 进入kamene交互界面 2.2.2 查看以太网头部 2.2.3 查看 ICMP ...

  6. 基于RDD实现简单的WordCount程序

    写在前面 因为觉得自己的代码量实在是太少了,所以,想着,每周至少写5个小的demo程序.现在的想法是,写一些Spark,Storm,MapReduce,Flume,kafka等等单独或组合使用的一些小 ...

  7. Spring MVC-从零开始-@RequestMapping结合@PathVariable (从URL路径中取值,作用于函数参数)

    1.可以直接在RequestMapping中value元素中使用{key}描述属性键 2.也可以在{key}中使用正则限定key的取值范围,从而限定url的变化范围 package com.jt; i ...

  8. Angular 样式绑定

    1. style.propertyName [style.Css属性名] = 'Css属性值变量'/"'css属性值'" // app.component.ts export cl ...

  9. 解决mac OSX下安装git出现的"git命令需要使用开发者工具。您要现在安装该工具吗"(19款Mac)

    1.本地安装Git ,这里不做说明 2.命令行执行 sudo mv /usr/bin/git /usr/bin/git-system 3.如果提示 权限不足,操作不被允许,关闭Rootless,重启按 ...

  10. Openshift创建Router和Registry

    Openshift创建Router和Registry: [root@DockerServer openshift]# oadm policy add-scc-to-user privileged sy ...