如何利用gulp构建前端自动化
1,使用 gulp.watch 来监听文件自动打包
在上篇文章中,介绍了如何利用webpack来为项目做打包编译等工作,其中介绍到在我们开发的时候,经常改动js,因为我们文件是引用编译后的js文件,若想让程序正常运行,必须 webpack
一次。这样会大大降低我们的工作效率。
网上找到说在 webpack.config.js 中添加 watch : true ,运行 webpack -w 即可?
然而,我发现并没有什么卵用??在此若有各位朋友知道怎么做的,在下面留言,谢谢。
既然,不能用,但是我不能就这样了,我一直听说 当做项目的时候,webpack + gulp 会更好哦。
自然,我就想到了 gulp。
2, gulp
http://www.gulpjs.com.cn/
gulp特别简单,在此不做多介绍,看我在项目中实际应用。
var gulp = require('gulp')
var webpack = require('gulp-webpack')
var webpackConfig = require('./webpack.config.js')
gulp.task('watch',function(){
gulp.src('./src/script/*.js')
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('built'))
})
gulp.task('default', function(){
// console.log('23')
gulp.watch('./src/script/*.js', ['watch'])
})
整个思路很简单,利用 gulp 来建立任务,并监听项目中js文件是否有变动,若有变动,就利用 gulp-webpack 来运行 webpack 的配置文件。
其中 pipe 是通道的意思,也相当于回调函数,比如 watch 任务的逻辑就是 当js文件变动后,找到 所有的 js 文件,通过运行 webpack 后,再去写入到 built 文件中去。
如何利用gulp构建前端自动化的更多相关文章
- Gulp构建前端自动化工作流之:常用插件介绍及使用
在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...
- 使用Gulp构建前端自动化方案
前言 在刚入门前端的时候,我们并不清楚前端有工具可以帮我们自动化打包压缩文件,当时只关注能实现功能就可以了,也不太在意前端性能优化的问题,随着项目功能的复杂,项目也变得越来越大,页面的执行速度也开始变 ...
- Gulp构建前端自动化项目
类似于Grunt,gulp是另一个同样功能很强大的前端项目自动化利器. 下面是项目的效果:
- [转]gulp构建前端工程
摘要: Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript. ...
- 利用gulp构建你的项目
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大 ...
- 基于gulp 的前端自动化构建方案总结
一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...
- 基于gulp的前端自动化开发构建
就前端的发展而言会越来越朝着后端的标准化靠近,后端的工程化以及模块化都很成熟.基于这样一个思路,开始探索如何优化目前的开发流程.而使用的工具就是gulp. 个人觉得gulp比较webpack更为简单实 ...
- 基于gulp的前端自动化开发构建新
关于gulp的使用,已经在之前写过一篇文章,但是遗留了一个问题.问题是实现文件的增量式更新,就是给html引入的js和css文件打上标记.每次更新标记更新. 上篇文章想通过开发同时实现标记的实时更新, ...
- 使用gulp助力前端自动化
前言 随着前端诸如webpack,rollup,vite的发展,gulp感觉似乎好像被取代了.其实并没有,只不过它从台前退居到了幕后.我们仍然可以在很多项目中看到它的身影,比如elementplus. ...
随机推荐
- c# 将一个长耗时任务改成task
public Task<ObservableCollection<WaterFallDataSource2>> InitalrenderSourceandBrush2(int ...
- JIT与JVM的三种执行模式:解释模式、编译模式、混合模式
Java JIT(just in time)即时编译器是sun公司采用了hotspot虚拟机取代其开发的classic vm之后引入的一项技术,目的在于提高java程序的性能,改变人们“java比C/ ...
- openvswitch BFD 简介
为了保护关键应用,网络中会设计有一定的冗余备份链路,网络发生故障时就要求网络设备能够快速检测出故障并将流量切换至备份链路以加快网络收敛速度.目前有些链路(如POS)通过硬件检测机制来实现快速故障检测. ...
- Graph-684. Redundant Connection
In this problem, a tree is an undirected graph that is connected and has no cycles. The given input ...
- (2)特征点匹配,并求旋转矩阵R和位移向量t
include头文件中有slamBase.h # pragma once // 各种头文件 // C++标准库 #include <fstream> #include <vector ...
- 从码农升为PM(节约成本)
做为一个码农的潜规则,用户怎么要求怎么写,不论过程只论是否符合要求以及减少bug的存在,虽然bug随时会出现,这就是码农,一直以来都说码农分很多种但个人认为就是一种,原因是码农不懂的换位思考,不懂的在 ...
- 【BZOJ1069】【SCOI2007】最大土地面积
题目大意:给定有n个点的点集,求该点集中任意四个点所构成的四边形中面积最大四边形的面积. 我们不难想到(不难yy出来),面积最大的四边形的四个顶点一定所给定的点集所构成的凸包上.我们求出给定点集的集合 ...
- 对Deeplung检测+两样性分类的一个整合
整体的流程分为以下几步: 读取原始数据(.mhd文件)——> 生成mask ——> 对数据预处理 ——> 执行检测 ——> 对检测结果进行分类 ——>可视化 懒一点,不贴 ...
- 剑指offer三十三之丑数
一.题目 如果一个数的因子中,出去1和本身以外,质数因子只包含2.3和5,则把改数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含质数因子7. 习惯上我们把1当做是第一个 ...
- (转)MySQL优化系列
原文:http://blog.csdn.net/jack__frost/article/details/71194208 数据库,后端开发者必学,而且现在以MySQL居多.这个系列将系统化MySQL一 ...