gulp 怎样实现页面的路径替换

2023-02-21 11:41:01JavaScript012

gulp 怎样实现页面的路径替换,第1张

比较好的解决法是，首先创建package.json文件，然后显示`npminstallgulp--save-dev`，这样会把gulp安装到当前目录下node_modules目录下。同时一个gulp的executable会被安装到./node_modules/.bin下。此时你执行。./node_modules/.bin/gulp即可。这种方法比全局安装要好，因为用到的gulp的版本只和当前项目相关。如果觉得每次输入./node_modules/gulp复杂，那么你在package.json中得scripts段落添加诸如{"build":"gulp"}，然后每次在工程目录执行npmbuild即可。npm运行脚本时，会自动到./node_modules/.bin下查找对应的可执行文件。

记录一下用 gulp 来合并、压缩CSS以及进行 MD5命名以及替换文件中引入的CSS文件，当然这一系列操作都是用基于gulp插件的，主要会用到下面的几个插件：

var concat = require('gulp-concat')//- 多个文件合并为一个；var minifyCss = require('gulp-minify-css')//- 压缩CSS为一行； var rev = require('gulp-rev')//- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector')//- 路径替换

安装Gulp插件到本地项目

npm init//- 生成一个 package.json，里面是一些常规的配置信息npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev//- 安装插件到项目目录内

完成上面两步后，会在我们的项目内生成一个package.json文件以及一个node_modules目录

创建配置文件 gulpfile.js

在项目根目录内创建一个 gulpfile.js 文件(必须是这个文件名哟~)，内容就是上面几个插件的配置信息：

var gulp = require('gulp')var concat = require('gulp-concat') //- 多个文件合并为一个；var minifyCss = require('gulp-minify-css')//- 压缩CSS为一行；var rev = require('gulp-rev') //- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector') //- 路径替换gulp.task('concat', function() {//- 创建一个名为 concat 的 task

gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css'])//- 需要处理的css文件，放到一个字符串数组里

.pipe(concat('wap.min.css'))//- 合并后的文件名

.pipe(minifyCss()) //- 压缩处理成一行

.pipe(rev())//- 文件名加MD5后缀

.pipe(gulp.dest('./css')) //- 输出文件本地

.pipe(rev.manifest()) //- 生成一个rev-manifest.json

.pipe(gulp.dest('./rev')) //- 将 rev-manifest.json 保存到 rev 目录内})

gulp.task('rev', function() {

gulp.src(['./rev/*.json', './application/**/header.php']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件

.pipe(revCollector()) //- 执行文件内css名的替换

.pipe(gulp.dest('./application/'))//- 替换后的文件输出的目录})

gulp.task('default', ['concat', 'rev'])