首页 > 代码库 > grunt+requirejs+angularjs 简单运用

grunt+requirejs+angularjs 简单运用

两个网址

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 简单运用