javascript - 用gulp如何给多个页面各自打包一个专属的js文件？

问题描述

问 题

场景：
我们目前的开发结构还是那种耦合度比较高的结构，后台java渲染出页面数据，页面内一般会引入所需的js文件，一般会有三到四个script标签，多的话，可能会有五六个，以及还有一些页面内的一些js。
我们技术要求我用gulp打包，把所有js打包成一个js文件，减少http请求。（我们前端的打包工具一直用的是gulp）
我之前做过单页面应用，用webpack打包，但是那个只有一个index页面，一个入口文件。但是现在我们有十多个页面，每个页面都需要打包一个js文件，请问应该如何实现这个需求？

解决方案

谢邀~~~
首先，同意楼上的观点
可以用webpack+gulp模式 用webpack配置 用gulp进行打包
同时 配置入口文件可以是一个页面生产一个入口文件
webpack.config.js 文件配置
以下代码主要部分是配置入口文件 每个入口文件必须以.main.js结尾 gulp打包后会生成.js文件
针对每个 页面 可以生成这样的 多个入口文件 然后在入口文件中引该用到的js文件 就可以了

var webpack = require('webpack');
var glob = require('glob');
var debug = true;
function getEntry() {
    var entry = {};
    glob.sync(__dirname + "/app/js/*.main.js").forEach(function (file) {
        var name = file.match(/([^/]+?)\.main\.js/)[1];
        entry[name] = __dirname + "/app/js/" + name + ".main.js";
    });
    return entry;
}
//used while add min ext
function getExt() {
    return debug ? ".min.js" : "js";
}
module.exports = {
    // context: __dirname + "/app/",
    entry: getEntry(),
    devtool: 'source-map',
    externals: {
        jquery: 'window.$'
    },
    output: {
        path: __dirname + '/build/js',
        filename: '[name].js',// + getExt(),
        sourceMapFilename: '[file].map'
    },
    module: {
        noParse: [],
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel',
        },
            {
                test:/\.less$/,
                loader:'style!css!less',
                options: {
                    modules: true,
                    localIdentName: '[path][name]__[local]--[hash:base64:5]'
                }

            }
        ]
    },
    debug: debug
};

gulpfile.js里边的配置：

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var webpackConf = require('./webpack.config.js');
var connect=require("gulp-connect")

var globs = {
    js: 'app/js/**/*.js',
    less: 'app/less/**/*.less',
    html: 'app/**/*.html',
    map: 'build/src/**/*.map',
    assets: [
        'app/fonts/**/*',
        'app/images/**/*',
        'app/js/lib/**/*',
    ]
};

var jsDest = webpackConf.debug ? "build/js" : "build/src";


gulp.task('clean', function () {
    var dest = ['build/'];
    return gulp.src(dest, {read: false})
        .pipe(plugins.clean());
})

gulp.task("css", function () {
    return gulp.src(globs.less)
        .pipe(plugins.less())
        // .pipe(plugins.minifyCss()) //debug close
        .pipe(gulp.dest("build/css"));
});


gulp.task('webpack', function () {
    return gulp.src(globs.js)
        .pipe(plugins.webpack(webpackConf))
        .pipe(gulp.dest(jsDest));
});

gulp.task('js', ['webpack'], function () {
    return gulp.src(jsDest + '/**/*.js')
        // .pipe(plugins.uglify())   //debug close
        // .pipe(plugins.rename(function (path) { // open while add min ext.
        //     // path.basename = path.basename.replace(/\.main$/, '.min');
        //     if(!webpackConf.debug)
        //         path.basename = path.basename + ".min";
        // }))
        .pipe(gulp.dest('build/js'));
});

gulp.task('assets', function () {
    return globs.assets.map(function (glob) {
        return gulp.src(glob)
            .pipe(gulp.dest(glob.replace(/\/\*.*$/, '').replace(/^app/, 'build')));
    });
});

gulp.task('html', function () {
    return gulp.src(globs.html)
        // .pipe(plugins.htmlmin({collapseWhitespace: true})) //debug close
        .pipe(gulp.dest('build'));
});
// //定义liverLOAD任务
// gulp.task('connect',function () {
//     connect.server({
//         livereload:true
//     })
// })
// //定义看守任务
// gulp.task('watch',function () {
//     gulp.watch('app/**/*.html',["html"]);
//     gulp.watch("app/js/**/*.js",["js"]);
//     gulp.watch("app/less/**/*.less",["css"])
// })

gulp.task('default', ['css', 'html', 'assets', 'js']);

package.json 东西有点多 你跟你的package.json对比一下 看缺少什么

{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "My first React && Webpack project!",
  "main": "app/js/index.main.js",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Poppy",
  "license": "MIT",
  "devDependencies": {
    "babel-loader": "^5.3.2",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "browser": "^0.2.6",
    "css-loader": "^0.16.0",
    "glob": "^7.1.1",
    "gulp": "^3.9.1",
    "gulp-cached": "^1.1.1",
    "gulp-clean": "^0.3.2",
    "gulp-connect": "^5.0.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-less": "^3.3.0",
    "gulp-load-plugins": "^1.4.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-remember": "^0.3.1",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.0",
    "gulp-webpack": "^1.5.0",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "postcss-loader": "^1.2.2",
    "react": "^0.13.3",
    "react-dom": "^15.4.2",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}

这篇关于javascript - 用gulp如何给多个页面各自打包一个专属的js文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！