zoukankan      html  css  js  c++  java
  • 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") %> */
    '
                },
                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:https://github.com/yuluhuang/ng-requirejs

  • 相关阅读:
    【4N魔方阵】
    【2(2N+1)魔方阵 】
    【二分查找法(折半查找法)】
    【循环搜寻法(使用卫兵)】
    【合并排序法】
    【快速排序法一】
    【快速排序二】
    【快速排序三】
    【数据结构】之 线性表详解
    【计算机网络基础】
  • 原文地址:https://www.cnblogs.com/yuluhuang/p/3973491.html
Copyright © 2011-2022 走看看