使用入门

Question

我希望在 OpenCart 中提高页面速度。所以，我想在一个文件中组合多个CSS或JS文件。但是，JS＆amp;根据启用的模块，动态添加css文件。

那么，我如何组合多个CSS或JS文件？

来自此

<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js"></script>
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js"></script>
<script src="catalog/view/javascript/common.js"></script>
<script src="catalog/view/javascript/jquery/flexslider/jquery.flexslider-min.js"></script>

<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
<link href="catalog/view/javascript/jquery/flexslider/flexslider.css" type="text/css" rel="stylesheet" />

至此

<script src="catalog/view/javascript/vwc43ljnyxgu4y/combined.js"></script>
<link href="catalog/view/theme/default/2hs3dfonugkz/combined.css" rel="stylesheet">

Answer 1

您可以使用minify这样可以将所有这些工作完美地结合在一起。

您还可以将RequireJS用于Javascript文件。 RequireJS从指定路径调用所有JS文件。

在这里检查一下 http://requirejs.org/docs/api.html#jsfiles

Answer 2

Gulp是一个很好的工具来完成你正在寻找的东西。它可以组合样式表和javascript文件，甚至可以进行版本控制，非常适合缓存。

取自他们的官方文件：

使用入门

1.全局安装gulp：

FileUtils.mv

2.在项目devDependencies中安装gulp：

module MyApp
  module JobHelpers
    def self.included(job_class)
      job_class.before_perform do |job|
        # work to be completed  
      end
    end
  end
end

3.在项目的根目录中创建

$ npm install --global gulp

：

$ npm install --save-dev gulp

4.运行gulp：

gulpfile.js

除了gulp-concat-css之外，使用Gulp将允许您完全按照您的需要进行操作。

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

gulp.task（'default'，function（）{ return gulp.src（'assets / ** / * .css'） .pipe（concatCss（ “样式/ bundle.css”）） .pipe（gulp.dest（ '出/'））; }）;

（注意，我与Gulp没有任何关系，但在我自己的许多项目中使用它。）

在OpenCart

2 个答案:

使用入门