Gulps

前端自动化打包发布已是一种常态，尤其在移动端，测试过程中静态资源的缓存是件很头疼的事情，有时候明明处理的bug测试还是存在，其实就是缓存惹的祸，手机不比pc浏览器，清理缓存还是有点麻烦的。所以自动化实现静态资源的版本更新才是正道。 先发布一下测试的项目结构 一. 1. 修改js和css文件 2. 通过对js,css文件内容进行hash运算，生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 3. 替换原html中的js,css文件名，生成一个带版本号的文件名 原结构下html文件代码： <link rel="stylesheet" href="css/style.css"> <script src="js/index.js"></script> 要达到的效果：在原结构下html文件代码 <link rel="stylesheet" href="css/style.css?v=0d83247610"> <script src="js/index.js?v=61c1ef9f34"></script></br> 二. 1.作为项目的开发依赖（devDependencies）安装gulp和gulp插件： npm install --save-dev gulp npm install --save-dev gulp-rev npm install --save-dev

前言 gulp的运行依赖与node.js，因此需保证node.js已经安装，node.js的下载地址 https://nodejs.org/en/ , 以下操作在windows环境下完成，在其他操作系统其实也是相似的 一，安装gulp cmd进入命令行输入命令： npm install -g gulp //-g表示全局安装 做项目依赖安装 npm install --save-dev gulp 二，gulp使用 1.新建js项目，例如：gulpTest (1)初识gulp使用 在gulpTest根目录下创建 gulpfile.js文件，然后在gulpfile.js输入以下代码 var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 }); gulpfile .js其实就是gulp运行构建的执行文件 在命令行执行：cd gulpTest 然后执行gulp即可 (2).使用gulp压缩js文件 接着在gulpTest项目目录下新建一个目录js,然后在js目录下创建一个app.js的文件并在该文件中写入如下代码 function sayHello(){ console.log("hello"); } 打开gulpfile.js文件修改下里面的内容 var gulp = require(