Question

我有一个firebase托管的应用程序正在运行，现在我正在尝试集成Semantic-UI，这样当我将它部署到firebase时，它将拥有所有语义图标和样式。图标和样式并没有以某种方式结束，它们在我当地的＆＃34; grunt服务中显示得很好。＆＃34;

我将semantic.js引用并集成到vendor.js中，我在标题中引用了semantic.css，并在构建期间集成到vendor.css中。我似乎在过度思考如何在firebase上获取我的图标和样式。想法？

我的grunt构建的dist文件夹位于[root folder] / dist中，Semantic-UI的dist文件夹位于[root folder] / bower_components / semantic-ui / dist。

的index.html

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/semantic-ui/dist/semantic.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="devNews">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->

      <div ng-include="'views/nav.html'"></div>
      <div class="container" ng-view=""></div>


    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/firebase/firebase.js"></script>
    <script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
    <script src="bower_components/mockfirebase/dist/mockfirebase.js"></script>
    <script src="bower_components/angularfire/dist/angularfire.min.js"></script>
    <script src="bower_components/semantic-ui/dist/semantic.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/posts.js"></script>
        <script src="scripts/services/post.js"></script>
        <script src="scripts/services/authorization.js"></script>
        <script src="scripts/services/profile.js"></script>
        <script src="scripts/controllers/profile.js"></script>
        <script src="scripts/controllers/postview.js"></script>
        <script src="scripts/controllers/nav.js"></script>
        <script src="scripts/controllers/authorization.js"></script>
        <script src="scripts/filters/url.js"></script>
        <!-- endbuild -->
</body>
</html>

Answer 1

我必须先将以下内容添加到我的Gruntfile.js中。由于我不再使用Bootstrap，我只是用一些Semantic-UI目录设置替换它：

copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            '*.html',
            'views/{,*/}*.html',
            'images/{,*/}*.{webp}',
            'fonts/*'
          ]
        }, {
          expand: true,
          cwd: '.tmp/images',
          dest: '<%= yeoman.dist %>/images',
          src: ['generated/*']
        }, {
          expand: true,
          cwd: 'bower_components/semantic-ui/dist',
          src: 'themes/**/*',
          dest: '<%= yeoman.dist %>'
        }, {
          expand: true,
          cwd: 'bower_components/semantic-ui/dist',
          src: 'components/*',
          dest: '<%= yeoman.dist %>'
        }]
      },
      styles: {
        expand: true,
        cwd: '<%= yeoman.app %>/styles',
        dest: '.tmp/styles/',
        src: '{,*/}*.css'
      }
    },

然后我必须引用CDN作为我的图标，将它们添加到我的semantic.css中。

@font-face {
    font-family: 'Icons';
    src: url("https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/themes/default/assets/fonts/icons.eot");
    }

等。对于每种图标类型。

集成Semantic-UI＆＃34; Dist＆＃34; Grunt Build之后进入Firebase部署的文件夹

1 个答案: