grunt+requirejs+angularjs 簡單運用

標籤：des   style   blog   http   color   io   使用   ar   檔案   

兩個網址

http://www.gruntjs.org/docs/getting-started.html

http://gruntjs.com/plugins

步驟：

1.cd demo檔案夾下

 

2.安裝grunt-cli

npm install -g grunt-cli    //全域安裝 -g

3.手動生產或自動生產 package.json

自動  npm init   //之後按需 輸入name和version。。。

4建立 Gruntfile.js

touch  Gruntfile.js

5.安裝外掛程式 外掛程式的用法詳見 http://gruntjs.com/plugins

npm install grunt --save-dev

npm install grunt-contrib-uglify --save-dev

npm install grunt-contrib-watch --save-dev

npm install grunt-contrib-requirejs --save-dev 

 

6.運行

grunt 

 

 

Gruntfile 配置如下

module.exports = function (grunt) {    // 項目配置    grunt.initConfig({        pkg: grunt.file.readJSON(‘package.json‘),        uglify: {            options: {                banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘            },            index: {                src: [‘scripts/App/indexApp.js‘, ‘scripts/Controllers/indexCtrl.js‘],//要壓縮的源檔案                dest: ‘scripts/<%= pkg.name %>.min.js‘//壓縮後的輸出位置            }        },        watch: {            scripts: {                files: [‘scripts/**/*.js‘],                tasks: [‘requirejs‘],                options: {                    spawn: false                }            }        },        requirejs: {            compile: {                options: {                    baseUrl: ".",                    paths: {requireLib: ‘scripts/requireMain/require‘},                    include: ‘requireLib‘,//如果需要把require也壓進去（這樣整個項目只需要一個js檔案了），設定其path，並                    name: ‘scripts/requireMain/indexMain‘,                    out: ‘scripts/requireMain/index.js‘,//輸出的檔案名稱                    // optimize:‘none‘,//注釋掉此行即可同時把合并後的js檔案壓縮                    mainConfigFile: ‘scripts/requireMain/indexMain.js‘//用已寫好的main.js檔案來處理模組依賴關係                }            }        }    });    // 載入提供"uglify"任務的外掛程式    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);    grunt.loadNpmTasks(‘grunt-contrib-watch‘);    grunt.loadNpmTasks(‘grunt-contrib-requirejs‘);    // 預設任務 使用uglify    //grunt.registerTask(‘default‘, [‘uglify‘]);    // 預設任務 使用 requirejs    grunt.registerTask(‘default‘, [‘requirejs‘, ‘watch‘]);};

 

 

demo下載 請到Angularjs中文社區 278252889  或者Angularjs中文社區2 群檔案自行下載

grunt+requirejs+angularjs 簡單運用