gulp配置实现修改js、css、html自动刷新

写在前面:

本配置支持es6、less、react

1.首先

给出初始的目录结构

给出执行gulp后的目录结构

给出执行gulp --p后的目录结构

2.package.json里是一个写入。文件描述了npm包的相关配置信息(作者、简介、包依赖等)和所需模块。

{"name": "gruntTest", "version": "1.0.0","description": "","main": "Gulpfile.js"
}

3.Gulpfile.js添加要执行的任务

var gulp = require('gulp');
var uglify = require('gulp-uglify');  //js压缩
var concat = require('gulp-concat');  //合并文件
var minifyCSS = require('gulp-minify-css');  //css压缩
var less = require('gulp-less');  //less
var changedInPlace = require('gulp-changed-in-place');//不管修改哪个文件,gulp会简化DEST里的html文件
var minifyHTML = require('gulp-htmlmin');  //简化html
var browserSync = require('browser-sync').create(); //自动刷新
var babel = require('gulp-babel'); //支持es6
var argv = require('yargs').argv; //支持不同环境
var sequence = require('gulp-sequence'); //按照顺序执行
var watch = require('watch');  //监听
var clean = require('gulp-clean');  //监听
//npm install --save-dev gulp-babel babel-preset-es2015
var DEST = 'dest/';
var HTML_PATH = './src/*.html';gulp.task('minify-js', function(){if(argv.p){gulp.src('src/source/*.js').pipe(babel({presets: ['es2015','react']})).pipe(uglify()).pipe(concat('gruntTest.min.js')).pipe(gulp.dest(DEST+'js'))}else{gulp.src('src/source/*.js').pipe(babel({presets: ['es2015','react']})).pipe(uglify()).pipe(concat('gruntTest.min.js')).pipe(gulp.dest('src/js'))		}		
});
gulp.task('minify-css', function(){if(argv.p){gulp.src('src/less/*.less')  //或者用['src/less/p1.less','src/less/p2.less'].pipe(less()).pipe(minifyCSS()).pipe(concat('style.min.css')).pipe(gulp.dest(DEST+'css')).pipe(browserSync.stream());	}else{gulp.src('src/less/*.less')  //或者用['src/less/p1.less','src/less/p2.less'].pipe(less()).pipe(minifyCSS()).pipe(concat('style.min.css')).pipe(gulp.dest('src/css')).pipe(browserSync.stream());}
});
gulp.task('minify-html', function(){gulp.src(HTML_PATH).pipe(changedInPlace({firstPass: true})).pipe(minifyHTML({collapseWhitespace: true})).pipe(gulp.dest(DEST)).pipe(browserSync.stream());
});
gulp.task('clean', function () {gulp.src(['./src/css/*.css','./src/js/*.js'], {read: false}).pipe(clean());
});
var files = ['./src/css/*.css','./src/js/*.js'
];
gulp.task('browser-sync', function(){browserSync.init(files,{server: {baseDir: './'},port: 9999});
});
gulp.task('watch', function() {gulp.watch('./src/source/*.js',['minify-js']);gulp.watch('./src/less/*.less',['minify-css']);	
});
if(argv.p){//productgulp.task('default', sequence('minify-js','minify-css','minify-html','browser-sync'));
}else{//developgulp.task('default', sequence('clean','minify-js','minify-css','watch','browser-sync'));
}

4.扩展

(1)上面一堆require看着好烦人,也很庞大。此处可以引入“gulp-load-plugins”插件

var gulpLoadPlugins = require('gulp-load-plugins'),plugins = gulpLoadPlugins();plugins.uglify();即可执行相应任务

(2)若某个文件夹下好多文件,那么watch监听时需要一一列举,可以目录写成json格式(例如src.source.*.js)。通过引入“fs”插件,用fs.freaddirSync()方法去读路径。循环即可,此处的实现纯属写js代码。

 

  

  

转载于:https://www.cnblogs.com/lixuemin/p/5611690.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/256934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

作为程序员之正则表达式

目录 正则表达式基础语法标准字符集合自定义的字符集合多行、单行模式高级语法选择符和分组反向引用预搜索/零宽断言例子匹配邮箱正则表达式 基础语法 标准字符集合 \D 和[^\d]意思一样,就是与 \d 相反 REG意义\ddigital表示 0 到 9 之间任意的一个数字\wworld表示任…

javascript 的dateObj.getTime() 在为C#的获取方式

publicstringGetTime() { Int64 retval 0; DateTime st newDateTime(1970, 1, 1); TimeSpan t (DateTime.Now.ToUniversalTime() -st); retval (Int64)(t.TotalMilliseconds 0.5); returnretval.ToString(); } 在Net中的实际测试代码 MSScriptControl.Scri…

学习笔记(34):Python网络编程并发编程-异步调用与回调机制

立即学习:https://edu.csdn.net/course/play/24458/296452?utm_sourceblogtoedu 1.知识点:(详细见代码注释) 1)同步调用: res1 pool.submit(ju,john1).result() 2)异步调用 pool.submit(ju,john1) 3…

c和c++的结构体使用

一:结构体其实有两种初始化方式 1、直接把多有的变量在其内部通过形参传入到结构体中,结构体定义在程序的最开头是个全局变量;这个时候参数已经传入进来,在本文件中都可以直接使用该结构体的所有成员变量 2、先定义,…

python第三方库安装的各种方法(全网最全,最简单易懂)

使用镜像: pip install virtualenv -i https://pypi.douban.com/simple 国内源: pip install -i https://pypi.tuna.tsinghua.edu.cn/simple module_name 或 pip install -i https://pypi.douban.com/simple module_name 国内的镜像源来加速 pip inst…

Jmeter服务器监控插件使用

Jmeter服务器监控插件使用 Jmeter-Plugins支持CPU、Memory、Swap、Disk和Network的监控,在测试过程中更加方便进行结果收集和统计分析。 一、准备工作: 1、下载Jmeter-Plugins插件,下载Server端ServerAgent插件; 2、解压Jmeter-Pl…

以后遇见 visual studio的调试bug出错,直接查询错误代码;高效解决调试问题

1、例如遇到&#xff1a; 严重性 代码 说明 项目 文件 行 错误 LNK2005 "void __cdecl readFileList(class std::basic_string<char,struct std::char_traits<char>, class std::allocator<char> >,class std::vector<class s…

数据库导入导出命令

Oracle数据导入导出imp/exp 功能&#xff1a;Oracle数据导入导出imp/exp就相当与oracle数据还原与备份。 大多情况都可以用Oracle数据导入导出完成数据的备份和还原&#xff08;不会造成数据的丢失&#xff09;。 Oracle有个好处&#xff0c;虽然你的电脑不是服务器&#xff0c…

CCNA系列课程(4)交换技术

第四节课 交换技术杜飞2009-06-28咱们今天来看一下局域网交换技术&#xff0c;也称为层2交换技术&#xff0c;内容主要包括层2交换的工作原理、网络环路、如何利用Spanning-Tree Protocol 来解决网络环路、VLAN及VTP技术&#xff0c;闲话少说&#xff0c;书归正传。我们在…

python中yield的用法详解——最简单,最清晰的解释(转载)

首先&#xff0c;如果你还没有对yield有个初步分认识&#xff0c;那么你先把yield看做“return”&#xff0c;这个是直观的&#xff0c;它首先是个return&#xff0c;普通的return是什么意思&#xff0c;就是在程序中返回某个值&#xff0c;返回之后程序就不再往下运行了。看做…

extern 全局变量在不同的文件使用方法(static)

例如&#xff1a;1.c int k6&#xff1b; 想要在2.c中调用1.c的k 则在2.c中用extern k 声明一下就可以使用了&#xff1b; int c3; ck; 但是如果1.c中是这样定义的 static int k6; 想要在2.c中使用k时不允许的&#xff0c;static只能在本文件中使用&#xff0c;外部文件…

python学习之路基础篇(第八篇)

一、作业&#xff08;对象的封装&#xff09;     要点分析 1.封装&#xff0c;对象中嵌套对象 2.pickle,load,切记&#xff0c;一定要先导入相关的类二、上节内容回顾和补充      面向对象基本知识&#xff1a; 1.类和对象的…

Ubuntu实现树莓派交叉编译

一、交叉编译 在一个平台上生成另一个平台上的可执行代码。为什么要大费周折的进行交叉编译呢&#xff1f;一句话&#xff1a;不得已而为之。有时是因为目的平台上不允许或不能够安装所需要的编译器&#xff0c;而又需要这个编译器的某些特征&#xff1b;有时是因为目的平台上的…

python常用的第三方库总结

通用 urllib -网络库(stdlib)。requests -网络库。grab – 网络库&#xff08;基于pycurl&#xff09;。pycurl – 网络库&#xff08;绑定libcurl&#xff09;。urllib3 – Python HTTP库&#xff0c;安全连接池、支持文件post、可用性高。httplib2 – 网络库。RoboBrowser –…

ubuntu系统安装vscode教程

方法一&#xff1a; 依次输入如下命令 1、sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make 2、sudo apt-get update 3、sudo apt-get install ubuntu-make 4、umake ide visual-studio-code 提示输入a即可 方法二&#xff1a; 在windows系统下载安装包&#xff0c…

pydebugger

定义结构体from ctypes import *WORD c_ushort DWORD c_ulong LPBYTE POINTER(c_ubyte) LPTSTR POINTER(c_char) HANDLE c_void_pDEBUG_PROCESS 0x00000001 CREATE_NEW_CONSOLE 0x00000010class STARTUPINFO(Structure):_fields_ [("cb", DWORD),("lpR…

Vue2 源码漫游(一)

Vue2 源码漫游&#xff08;一&#xff09; 描述&#xff1a; Vue框架中的基本原理可能大家都基本了解了&#xff0c;但是还没有漫游一下源码。 所以&#xff0c;觉得还是有必要跑一下。 由于是代码漫游&#xff0c;所以大部分为关键性代码&#xff0c;以主线路和主要分支的代码…

神经网络中的反向传播算法

神经网络中的方向传播算法讲得复杂难懂。简单地说明它的原理&#xff1a; 神经网络&#xff1a;输入层&#xff0c;隐藏层&#xff0c;输出层。根据线性关系&#xff0c;激活函数&#xff0c;并最终根据监督学习写出误差表达式。此时&#xff0c;误差函数可写成&#xff0c;那么…

有限元笔记02:第三章

1.局部坐标到全局坐标变换 2.

bug__android studio 出现布局文件不提示,且点击代码不能跟踪代码

1&#xff0c;点击布局文件&#xff0c;出现 Cannot find declaration to go to ? 且 点击代码不能跟踪代码&#xff1f; 把 项目的build.gradle 中的 compileSdkVersion 23 版本设置最高。 apply plugin: com.android.applicationandroid { compileSdkVersion 23 b…