1

私は不平を言うのが初めてで、セットアップに少し助けが必要です。SASS、Compass を使用して、すべての .js ファイルを 1 つの縮小ファイルにコンパイルしたいと考えています。

私が取り組んでいるサイトは現在 grunt を使用していないため、使用するように設定したいと考えています。すべての .js ファイルがページの下部に含まれています。1 つの縮小された .js ファイルだけにすべての .js ファイルが含まれるように変更するには、どうすればよいですか?

インデックス ページの下部に、次のように .js ファイルが含まれています。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.min.js"></script> 
<script src="//code.angularjs.org/1.3.4/angular-sanitize.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="bower_components/angular-promise-tracker/promise-tracker.js"></script>
<script src="bower_components/angular-promise-tracker/promise-tracker-http-interceptor.js"></script>
<script src="js/config.json" type="application/json"></script>
<script src="js/infinite-scroll.js"></script>
<script src="js/hotels.js"></script>
<script src="js/weather.js"></script>
<script src="js/main.js"></script>

私の Gruntfile.js は次のようになります。

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        minified : {
          files: {
            src: [
              '/js/src/**/*.js',                
              '/js/src/*.js'
            ],
            dest: '/js/min/'
          }
        },      

        compass: {
            dist: {
                options: {
                    sassDir: 'sass',
                    cssDir: 'css'
                }
            }
        },

        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['compass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-minified');
    grunt.registerTask('default',['watch']);
}

私のpackage.jsonは次のようになります：

{
  "name": "hoteldemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-compass": "^1.0.3",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-watch": "^0.6.1"
  }
}
4

1 に答える 1

1

おそらくgrunt-usemin のようなものを使いたいでしょう。Yeomanが提供するいくつかのジェネレーターを調べてみる価値さえあるかもしれません。これらのジェネレーターは一般的に、使用しているテクノロジに応じて適切な足場を提供するからです。

プロジェクトで単独で使用grunt-useminすると、次のようになります。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.min.js"></script> 
<script src="//code.angularjs.org/1.3.4/angular-sanitize.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<!-- build:js js/min/app.min.js -->
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="bower_components/angular-promise-tracker/promise-tracker.js"></script>
<script src="bower_components/angular-promise-tracker/promise-tracker-http-interceptor.js"></script>
<script src="js/config.json" type="application/json"></script>
<script src="js/infinite-scroll.js"></script>
<script src="js/hotels.js"></script>
<script src="js/weather.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

セットアップにかなり固有のビルドを実行するには、grunt タスクを構成する必要があります。grunt-usemin のドキュメントに従ってください。

于 2015-04-20T21:34:50.243 に答える