javascript - Gulp 任务以排除特定 js 文件写入 Index.html 文件
问题描述
嗨,我是 Gulp 的新手,我的要求是在 build-dist 任务中排除特定的 js 文件写入 index.html。以下是要排除写入 index.html 的文件。
下面是 gulpfile.js:根据我的要求,我猜 gulp.task('full-build-dist', ['build-dist'] 应该被修改为指定带有 (!) 前缀的 js 文件,但不要'不知道实际代码,因此将不胜感激。
'use strict';
/*** DO NOT MODIFY THIS FILE ***/
let gulp = require('gulp');
let fs = require('fs-extra');
let inject = require('gulp-inject');
let sequence = require('run-sequence');
/**
* Load the default configuration from the ng1-template-gulp package.
*/
let ng1TemplateGulp = require('ng1-template-gulp');
let config = ng1TemplateGulp.config;
let utils = ng1TemplateGulp.utils;
/**
* Once the config is loaded from the ng1-template-gulp package, call the local gulp.config module
* to customize the config as per the project requirements.
*/
utils.compileTsFile('./gulp.config.ts', config.folders.build);
require(`${config.folders.build}gulp.config`)(config);
config.options.bowerJson = require(`${config.folders.root}bower.json`);
gulp.task('load_rev_manifest', done => {
config.revManifest = require(`${config.folders.distBuild}rev-manifest.json`);
done();
});
gulp.task('full-build-dist', ['build-dist'], () => {
utils.log('Creating a new json file for cms to use');
var fileContent = fs.readFileSync(`${config.folders.distBuild}index.html`, "utf8");
let array = fileContent.split('<script');
let result = [];
for (let i = 0; i < array.length; i++) {
if (i == 0 || i == array.length - 1 || i == array.length - 2) {
continue;
}
let elem = array[i];
let tempResult = elem.substring(elem.indexOf('js/') + 3, elem.indexOf('</script>') - 2);
result.push(tempResult);
}
utils.log(`Element :${config.folders.distBuild}` + JSON.stringify(result));
fs.writeJson(`${config.folders.distBuild}library.json`, result, function (err) {
// console.log(err)
})
});
var bless = require('gulp-bless');
gulp.task('split', () => {
utils.log('css only' + `${config.folders.distBuild}css`);
return gulp.src(`${config.folders.distBuild}css/*.css`)
.pipe(bless({
imports: false,
suffix: '-part'
}))
.pipe(gulp.dest(`${config.folders.distBuild}css`));
});
gulp.task('complete-build', function () {
sequence('clean', 'build-dist', 'copy-files-upload', 'copy-files-upload1', 'copy-files-upload2', 'copy-files-upload3', 'copy-files-add', 'split', 'add-css');
});
gulp.task('add-css', function () {
let cssFiles = `${config.folders.distBuild}css/*part1.css`;
let cssSrc = gulp.src(cssFiles, { read: false });
let configOptions = {
starttag: '<!-- inject:css:def -->',
relative: true,
removeTags: true
};
let injectTask = utils.src(`${config.folders.distBuild}index.html`, 'local-inject')
.pipe(inject(cssSrc, configOptions));
injectTask = injectTask.pipe(gulp.dest(`${config.folders.distBuild}`));
return injectTask;
});
gulp.task('copy-files-upload', function () {
let jsFiles = [`${config.folders.bower}ng-file-upload-shim/*`];
return gulp.src(jsFiles).pipe(gulp.dest(`${config.folders.distBuild}js/ng-file-upload-shim`));
});
gulp.task('copy-files-upload1', function () {
let jsFiles1 = [`${config.folders.bower}ng-file-upload/*`];
return gulp.src(jsFiles1).pipe(gulp.dest(`${config.folders.distBuild}js/ng-file-upload`));
});
gulp.task('copy-files-upload2', function () {
let jsFiles2 = [`${config.folders.client}/customjs/fileuploader.js`];
return gulp.src(jsFiles2).pipe(gulp.dest(`${config.folders.distBuild}js`));
});
gulp.task('copy-files-upload3', function () {
let jsFiles2 = [`${config.folders.client}/customjs/tealeaf*.js`];
console.log('jsFiles2', jsFiles2);
return gulp.src(jsFiles2).pipe(gulp.dest(`${config.folders.distBuild}js`));
});
gulp.task('copy-files-add', function () {
let jsFiles = [`${config.folders.distBuild}js/ng-file-upload/ng-file-upload-shim.js`, `${config.folders.distBuild}js/ng-file-upload/ng-file-upload.js`, `${config.folders.distBuild}js/fileuploader.js`, `${config.folders.distBuild}js/tealeaf*.js`];
let jsSrc = gulp.src(jsFiles, { read: false });
let configOptions = {
starttag: '<!-- inject:js:upload -->',
relative: true,
removeTags: true
};
let injectTask = utils.src(`${config.folders.distBuild}index.html`, 'local-inject')
.pipe(inject(jsSrc, configOptions));
injectTask = injectTask.pipe(gulp.dest(`${config.folders.distBuild}`));
return injectTask;
});
解决方案
这是我的朋友为 gulp 制作的,它只将两个脚本捆绑在一起
const gulp = require('gulp');
const eslint = require('gulp-eslint');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const browserify = require('browserify');
const babelify = require('babelify');
gulp.task('bundle-js', function() {
let files = ['main', 'about'];
return merge(files.map(function(file) {
return browserify({
entries: './src/js/' + file + '.js'
})
.transform(babelify)
.bundle()
.pipe(source(file + '.js'))
.pipe(buffer())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'))
}));
});
那段方便的代码将使所有内容都变得丑陋和源化。不要连接,因为这正在成为 Web 开发的反模式。我可能错过了所需的包,但如果我这样做了,错误很容易阅读。:D
推荐阅读
- angularjs - angularJs:以 00:00:00 格式存储时间
- reactjs - React Native 如何使用多个文本输入值进行求和并将结果存储到数组并显示结果列表
- dynamics-crm - 如何在 Dynamics 365 中使用 C# Web API
- ios - Swift Codable:如何将顶级数据编码到嵌套容器中
- dart - 如何在颤振图像选择器中将图像添加到 Firestore
- javascript - Axios: how to cancel request inside request interceptor properly?
- sql - 使用连接重复更新语句
- android - 位置侦听器不在后台工作
- hibernate - kotlin 的 JPA:lazy 和 @Transient 不适用于休眠
- ruby-on-rails - 要求 rails 不要在生产中捆绑 javascript - 5.0.7