Javascript 使用gulp在页面上临时添加脚本

我目前正在做一个gulp项目，我有一个

gulpfile.js

var config = require('./config.json'),
    gulp = require('gulp'),
    watch = require('gulp-watch'),
    connect = require('gulp-connect'),
    runSequence = require('run-sequence');

gulp.task('server', function() {
    connect.server({
        root: './',
        port: config.port,
        livereload: true
    });
});

gulp.task('html', function() {
    gulp.src('./' + config.creatives + '/**/*.html')
        .pipe(connect.reload());
});

gulp.task('watch', function() {
    gulp.watch(['./' + config.creatives + '/**/*.html'], ['html']);
    gulp.watch(['./' + config.creatives + '/**/*.css'], ['html']);
});

gulp.task('default', function() {
    return runSequence('server', ['html', 'watch']);
});

config.json

内容是

{
    "port" : "2727",
    "creatives" : "creatives"
}

我的问题是如何将临时脚本文件添加到当前查看的页面？我看到

connectlivereload

正在我的页面底部添加

livereload.js

，我也希望这样做。提前谢谢

--更新---14-03-2017--

我用下面的代码更新了

gulpfile.js

服务器，但是

test.js

被永久地注入到文件中

gulp.task('server', function() {
    connect.server({
        ...
        livereload: true,
        middleware: function(connect, option) {
            return [
                function(req, res, next) {
                    var file, path;
                    if (req.url.indexOf('preview') > -1) {
                        file = req.url;
                        path = file.replace('index.html', '')
                        gulp.src('./' + file)
                            .pipe(insertLines({
                                'before': /<\/body>$/,
                                'lineBefore': '<script type="text/javascript" src="test.js"></script>'
                            }))
                            .pipe(gulp.dest('./' + path));
                    }
                    next();
                }
            ]
        }
    });
});

gulp.task（'server'，function（））{
connect.server({
...
利弗雷罗德：没错，
中间件：功能（连接，选项）{
返回[
功能（req、res、next）{
var文件，路径；
if（请求url.indexOf（'preview'）>-1）{
file=req.url；
path=file.replace（'index.html'，''）
gulp.src（'./'+文件）
.管道（插入线）({
“之前”：/$/，
“lineBefore”：”
}))
.管道（大口目的地（'./'+路径））；
}
next（）；
}
]
}
});
});

---

我只需要在服务器启动时添加

test.js

，在服务器结束时删除即可。

我通过使用gulp编辑模块本身制定了解决方案。
不确定这是否正确，但对我来说，这很好（目前）

解决方案

我制作了一个

updatemodule.js

文件，其中包含以下脚本：

var gulp = require('gulp'),
    tap = require('gulp-tap'),
    rename = require('gulp-rename');

gulp.task('default', function() {
    return gulp.src('./node_modules/connect-livereload/index.js')
        .pipe(rename('~index.js'))
        .pipe(gulp.dest('./node_modules/connect-livereload/'))
        .pipe(tap(function(file, callback) {
            var newFile = file.contents.toString(),
                oldText = 'return \'<script src="\' + src + \'" async="" defer=""></script>\'',
                newtext = 'return \'<script src="\' + src + \'" async="" defer=""></script><script src="http://localhost:3000/temp.js" ></script>\'';
                newContents = newFile.replace(oldText, newtext);
            file.contents = new Buffer(newContents);
            return file;
        }))
        .pipe(rename('index.js'))
        .pipe(gulp.dest('./node_modules/connect-livereload/'));
});

var gulp=require（'gulp'），
tap=需要（'gulp-tap'），
重命名=需要（'gulp-rename'）；
gulp.task（'default'，function（）{
返回gulp.src（'./node_modules/connect livereload/index.js'）
.pipe（重命名（'~index.js'））
.pipe（吞咽目标（'./节点模块/连接livereload/'））
.pipe（tap（函数（文件、回调）{
var newFile=file.contents.toString（），
oldText='return\'\''，
newtext='return\'\''；
newContents=newFile.replace（旧文本，新文本）；
file.contents=新缓冲区（newContents）；
返回文件；
}))
.pipe（重命名（'index.js'））
.管道（吸入目的地（'./节点模块/连接livereload/）；
});

我通过在终端上键入

gulp--gulpfile./updatemodule.js

来运行这个脚本一次

---

它所做的是查找

connect livereload

模块并复制

index.js

，将其重命名为

~index.js

（用于备份），然后修改

index.js

以包含我的临时脚本（

temp.js

）并将其保存在与

index.js

相同的位置上。我通过使用gulp编辑模块本身制定了一个解决方案。
不确定这是否正确，但对我来说，这很好（目前）

解决方案

我制作了一个

updatemodule.js

文件，其中包含以下脚本：

var gulp = require('gulp'),
    tap = require('gulp-tap'),
    rename = require('gulp-rename');

gulp.task('default', function() {
    return gulp.src('./node_modules/connect-livereload/index.js')
        .pipe(rename('~index.js'))
        .pipe(gulp.dest('./node_modules/connect-livereload/'))
        .pipe(tap(function(file, callback) {
            var newFile = file.contents.toString(),
                oldText = 'return \'<script src="\' + src + \'" async="" defer=""></script>\'',
                newtext = 'return \'<script src="\' + src + \'" async="" defer=""></script><script src="http://localhost:3000/temp.js" ></script>\'';
                newContents = newFile.replace(oldText, newtext);
            file.contents = new Buffer(newContents);
            return file;
        }))
        .pipe(rename('index.js'))
        .pipe(gulp.dest('./node_modules/connect-livereload/'));
});

var gulp=require（'gulp'），
tap=需要（'gulp-tap'），
重命名=需要（'gulp-rename'）；
gulp.task（'default'，function（）{
返回gulp.src（'./node_modules/connect livereload/index.js'）
.pipe（重命名（'~index.js'））
.pipe（吞咽目标（'./节点模块/连接livereload/'））
.pipe（tap（函数（文件、回调）{
var newFile=file.contents.toString（），
oldText='return\'\''，
newtext='return\'\''；
newContents=newFile.replace（旧文本，新文本）；
file.contents=新缓冲区（newContents）；
返回文件；
}))
.pipe（重命名（'index.js'））
.管道（吸入目的地（'./节点模块/连接livereload/）；
});

我通过在终端上键入

gulp--gulpfile./updatemodule.js

来运行这个脚本一次

---

它所做的是查找

连接livereload

模块并复制

index.js

，将其重命名为

~index.js

（用于备份），然后修改

index.js

，以包含我的临时脚本（

temp.js

），并将其保存在与

index.js
相同的位置，也许您可以检查gulp Injection<代码>gulp inject

将脚本永久注入页面，我只需要临时脚本，就像只在运行gulp时一样，但当项目准备好部署时，将不包括该临时脚本。选中

conmect-livereload

，查看页面时会在页面上添加

livereload.js

，但该脚本将永远不会包含在部署中。也许您可以选中gulp inject<代码>gulp inject将脚本永久注入页面，我只需要临时脚本，就像只在运行gulp时一样，但当项目准备好部署时，将不包括该临时脚本。选中

conmect-livereload

，查看页面时会在页面上添加

livereload.js

，但该脚本永远不会包含在部署中。