javascript - gulp 构建问题~-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - gulp 构建问题~

阿神 2017-04-11 12:32:05

289

最近学习 gulp ，在一些教程里，总会把：gulp-rev ， gulp-rev-replace ， gulp-useref 放在一起。

可是在学习中，遇到了很多问题，

左边的是我目录结构，右边的是 gulpfile.js 。

插件依赖什么的都安装好了，只是写法可能有问题。

如上写法运行后，只是 index.html 文件改变了， index 后面加了一串字符。

index.html 这样写应该没有问题的吧？

生成的 index 。别人的不都是 main.css 和 main.js 中间加了一行字符串吗？为什么我的是 index.html 文件，加了字符串。这样我的 browser-sync 服务器就启动不了了啊？

但是怎么写呢？？求指导~

阿神

闭关修行中......

reply all (3)

PHPzhong2017-04-11 12:34:05 3 floor

我自己找了资料解决了这个问题，方法如下：

gulp.task("index", function() { var jsFilter = filter("**/*.js", { restore: true }); var cssFilter = filter("**/*.css", { restore: true }); var indexHtmlFilter = filter(['**/*', '!**/index.html'], { restore: true }); return gulp.src("src/index.html") .pipe(useref()) // Concatenate with gulp-useref .pipe(jsFilter) .pipe(uglify()) // Minify any javascript sources .pipe(jsFilter.restore) .pipe(cssFilter) .pipe(cssmin()) // Minify any CSS sources .pipe(cssFilter.restore) .pipe(indexHtmlFilter) .pipe(rev()) // Rename the concatenated files (but not index.html) .pipe(indexHtmlFilter.restore) .pipe(revReplace()) // Substitute in new filenames .pipe(gulp.dest('dist')); });

Like+0

Add Reply

PHPzhong2017-04-11 12:34:05 2 floor

把rev放在filiter作用域里面去应该能解决你的问题

Like+0

Add Reply

巴扎黑2017-04-11 12:34:05 1 floor

加版本号的好像要单独在建一个任务，用到的包 gulp-rev 和 gulp-rev-collector
差不多是这样

gulp.task('markVersion', () => { const needFile = ['**/*.{js,css}']; return gulp.src(needFile) .pipe($.rev()) .pipe(gulp.dest(appInfo.revDir)) .pipe($.rev.manifest()) .pipe(gulp.dest(appInfo.revDir + 'rev')); }); gulp.task('addVersion', () => { return gulp.src(['**/rev/**/*.json', appInfo.revDir + '*.html']) .pipe($.revCollector()) .pipe(gulp.dest(appInfo.revDir)); });

分为两个步骤，先给css/js文件加版本号，然后修改html文件的引用

Like+0

Add Reply