ci 怎么加载 js和css

要在CI（持续集成）环境中加载JS和CSS文件，可以通过以下几种方法：使用CDN、通过Webpack等打包工具、使用Gulp等构建工具。 其中，使用CDN 是一种简单且有效的方法，可以通过直接引用外部资源来减少本地文件的管理和版本控制问题。

使用CDN

CDN（内容分发网络）是一种通过将内容分发到多个服务器上，从而提高访问速度和可用性的方法。通过CDN加载JS和CSS文件非常简单，您只需在HTML文件中引用外部CDN链接即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CI加载JS和CSS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

使用Webpack打包工具

Webpack是一种现代JavaScript应用程序的静态模块打包工具。它会递归地构建依赖关系图，最终将模块打包成一个或多个bundle。Webpack不仅可以处理JavaScript，还可以处理CSS和其他静态资源。

设置Webpack

首先，您需要安装Webpack及其相关插件：

npm install --save-dev webpack webpack-cli style-loader css-loader

然后，创建一个webpack.config.js文件以配置Webpack：

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
};

使用Webpack加载CSS和JS

在src/index.js文件中，您可以引入CSS和JS文件：

import './styles.css';
import $ from 'jquery';
$(document).ready(function () {
    console.log("jQuery is loaded and ready!");
});

在styles.css文件中，您可以编写CSS样式：

body {
    background-color: #f0f0f0;
}

最后，运行Webpack以打包文件：

npx webpack

使用Gulp构建工具

Gulp是一个基于流的自动化构建工具，可以帮助您在项目中自动化执行常见任务，如压缩文件、编译Sass、合并文件等。

设置Gulp

首先，安装Gulp及其相关插件：

npm install --save-dev gulp gulp-concat gulp-uglify gulp-clean-css

然后，创建一个gulpfile.js文件以配置Gulp任务：

const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');
gulp.task('scripts', function () {
    return gulp.src(['src/js/*.js'])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
gulp.task('styles', function () {
    return gulp.src(['src/css/*.css'])
        .pipe(concat('all.css'))
        .pipe(cleanCSS())
        .pipe(gulp.dest('dist/css'));
});
gulp.task('default', gulp.parallel('scripts', 'styles'));

使用Gulp加载CSS和JS

在src/js和src/css目录中，您可以放置您的JS和CSS文件，然后运行Gulp任务以进行打包：

npx gulp

运行后，Gulp会在dist目录中生成all.js和all.css文件，您可以在HTML文件中引用这些文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CI加载JS和CSS</title>
    <link rel="stylesheet" href="dist/css/all.css">
</head>
<body>
    <script src="dist/js/all.js"></script>
</body>
</html>

结语

在CI环境中加载JS和CSS文件有多种方法，每种方法都有其优缺点。使用CDN 是一种简单且高效的方法，尤其适合小型项目。使用Webpack 和 Gulp 等构建工具则提供了更强大的功能和灵活性，适合大型项目和复杂的依赖关系管理。根据项目的具体需求，选择合适的方法可以提高开发效率和代码质量。