备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

【grunt第三弹】grunt在前端实际项目中的应用

2017-12-16 1065
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

前言

经过前两次的学习，我们了解了grunt打包的一些基础知识，对于压缩几个文件有了初步认识

但是实际项目中的应用往往不是那么简单的，因为我们会有分支，我们也会有app版本Html5版本，更复杂的情况是我们有各个频道，而且各个频道是不同的团队在开发

那么统一的一套打包工具如何满足不同团队的需求呢？

然后，我们本地联调时候，仍然需要打包，但是打包的代码有些时候却不想要minify，这些功能都是实际项目重要用到的

我们这个时间化大力气学习grunt打包一块的知识是有绝对意义的，不然前端代码合并一块的难题仍然不可破，所以有心思在前端的朋友还是应该掌握一套前端自动化工具

我们继续几天的学习吧！！！

移动打包文件

其实，grunt本身具有这样的功能，但是我们实际项目重会出现这种可能：

我们核心框架会有一套压缩代码，并且会在对应目录生成文件用于发布，但是这个地方的权限对各个频道团队是不可见的

所以，我们在各个频道的公共文件夹内应该将刚刚的文件给复制过去，这块代码其实很简单，不需要任何新知识都能实现：

我们这里依旧采用昨天的require相关的代码，但是一有个不同的地方就是，我们要同时在D盘的common文件夹中生成该文件

这个代码其实比较简单，这里我们先介绍一个新的插件copy

grunt-contrib-copy

该插件用于复制文件到你想要的文件夹处

复制代码 
grunt.initConfig({ copy: {
  main: {
    flatten: true,
    src: 'src/*.js',
    dest: 'dest/'
  }
}
});
复制代码

这段代码就会将src中的js文件搞到dest里面，并且新建src文件夹：

$ grunt copy
Running "copy:main" (copy) task
Copied 7 files

若是不想复制文件夹只要文件应该这样干：

复制代码 
grunt.initConfig({ copy: {
  main: {
    flatten: true,
    //    filter: 'isFile',
    expand: true,
    src: 'src/**.js',
    dest: 'dest/'
  }
}
});
复制代码

这块完了，我们就来移动打包文件至D盘了

移动打包文件

这个时候代码这样写就好（也许移动前我们还想将其文件夹里面的东西销毁，暂时不考虑了）

复制代码 
module.exports = function (grunt) {

  grunt.initConfig({ copy: {
    main: {
      //      flatten: true,
      //      expand: true,
      src: 'dest/**.js',
      dest: 'd:/common/'
    }
  }
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-requirejs');

  grunt.registerTask('build', 'require demo', function () {

    //第一步，读取配置信息
    var cfg = grunt.file.readJSON('cfg.json');
    cfg = cfg.requirejs;
    grunt.config.set('requirejs', { test: cfg });

    //第二步，设置参数
    grunt.log.debug('参数：' + JSON.stringify(grunt.config()));

    //第三步跑任务
    grunt.task.run(['requirejs']);

  });

  grunt.registerTask('default', 'test demo', ['build', 'copy']);

}
复制代码
复制代码 
Running "build" task

Running "requirejs:test" (requirejs) task
>> Tracing dependencies for: d:/grunt/dest/libs.js
>> Uglifying file: d:/grunt/dest/libs.js
>> d:/grunt/dest/libs.js
>> ----------------
>> d:/grunt/src/zepto.js
>> d:/grunt/src/underscore.js
>> d:/grunt/src/backbone.js
>> d:/grunt/src/test01.js
>> d:/grunt/src/require.text.js
>> text!src/demo01.html

Running "copy:main" (copy) task
Copied 8 files
复制代码

关于移动相关的知识点暂时介绍到这里，我们进入下一话题

分支/频道处理

我们在实际项目重会遇到这种情况，我们一个主干分支上可能拉出很多分支完成不同的功能，而各个分支就有那么一点点不同，那么这个时候打包工具该怎么办呢？

我们一般是这样处理的：

① 首先全局只会有一个打包工具

② 其次每一个分支都会有一个gruntCfg.json的配置文件，存储相关的打包信息

③ 每次打包时候便把响应的分支打印到各自的dest目录里面

为了模拟这一情况我们将grunt打包相关的文件放到D盘的grunt目录里面，并在D盘新建gruntDemo目录

然后我们在gruntDemo中建立一个项目，并且为这个项目拉一个分支，比如现在项目是地demo01与demo02

现在文件结构如下：

复制代码 
D:\GRUNTDEMO
├─demo01
│  │  gruntCfg.json
│  │
│  └─src
│          backbone.js
│          require.js
│          require.text.js
│          test01.js
│          test02.js
│          underscore.js
│          zepto.js
│
└─demo02
    │  gruntCfg.json
    │
    └─src
            backbone.js
            require.js
            require.text.js
            test01.js
            test02.js
            underscore.js
            zepto.js
复制代码

这个时候，要实现功能最好的方法就是写自定义任务了，其它方案不好使，这个时候起配置文件也需要有一定修改，比如其中的路径需要加入参数信息

复制代码 
{
  "requirejs": {
    "options": {
      "baseUrl": "<%= config.srcDir %>",
      "paths": {
        "$": "src/zepto",
        "_": "src/underscore",
        "B": "src/backbone",
        "test": "src/test01",
        "text": "src/require.text"

      },
      "include": [
        "$",
        "_",
        "B",
        "test",
        "text!src/demo01.html"
        ],
        "out": "<%= config.destDir %>/libs.js"
      }
  }
}
复制代码

这个时候initConfig相关信息时候，首先得传入path依赖的文件目录，以及输出的文件目录

复制代码 
module.exports = function (grunt) {

  grunt.loadNpmTasks('grunt-contrib-requirejs');

  //channel为频道名称，project为项目名称，这里对应gruntDemo，branch为其分支，默认与grunt目录为平行关系，佛则package.json里面应该有配置信息
  grunt.registerTask('build', 'require demo', function (channel, project, branch) {

    var path = '../' + channel + '/' + project + branch;
    grunt.log.debug('path: ' + path);

    //第一步，读取配置信息
    var cfg = grunt.file.readJSON(path + '/gruntCfg.json');
    cfg = cfg.requirejs;

    grunt.config.set('config', {
      srcDir: path,
      destDir: path + '/dest'
    });

    grunt.config.set('requirejs', { main: cfg });

    //第二步，设置参数
    grunt.log.debug('param: ' + JSON.stringify(grunt.config()));

    //第三步跑任务
    grunt.task.run(['requirejs']);

  });

  grunt.registerTask('default', 'test demo', ['build', 'copy']);

}
复制代码

于是我们第一步工作成功了：

复制代码 
$ grunt build:gruntDemo:demo:02 --debug
Running "build:gruntDemo:demo:02" (build) task
[D] Task source: d:\grunt\Gruntfile.js
[D] path: ../gruntDemo/demo02
[D] param: {"config":{"srcDir":"../gruntDemo/demo02","destDir":"../gruntDemo/dem
o02/dest"},"requirejs":{"main":{"options":{"baseUrl":"../gruntDemo/demo02","path
s":{"$":"src/zepto","_":"src/underscore","B":"src/backbone","test":"src/test01",
"text":"src/require.text"},"include":["$","_","B","test","text!src/demo01.html"]
,"out":"../gruntDemo/demo02/dest/libs.js"}}}}

Running "requirejs:main" (requirejs) task
[D] Task source: d:\grunt\node_modules\grunt-contrib-requirejs\tasks\requirejs.j
s
>> Tracing dependencies for: d:/gruntDemo/demo02/dest/libs.js
>> Uglifying file: d:/gruntDemo/demo02/dest/libs.js
>> d:/gruntDemo/demo02/dest/libs.js
>> ----------------
>> d:/gruntDemo/demo02/src/zepto.js
>> d:/gruntDemo/demo02/src/underscore.js
>> d:/gruntDemo/demo02/src/backbone.js
>> d:/gruntDemo/demo02/src/test01.js
>> d:/gruntDemo/demo02/src/require.text.js
>> text!src/demo01.html
复制代码

如果改变一下任务命令呢：

grunt build:gruntDemo:demo:01 --debug

结果证明也是没有问题的，这个地方我就不贴出来了，各位自己去试试，我们分支处理一块暂时到这里

频道处理其实我们这里已经做了，第一个参数是频道，第二个参数是项目，第三个参数为分支，所以频道相关我们暂时就不说了

native与HTML5打包

最后让我们来看看如何打包native文件，native文件的打包其实与打包HTML5的方式类似，只不过我们这里需要一点点配置，让一个项目可以打包成不同的效果

仍然以上面demo01为例，他的配置文件可能就需要做一定调整：

复制代码 
{
    "requirejs": {
        "options": {
            "baseUrl": "<%= config.srcDir %>", 
            "paths": {
                "$": "src/zepto", 
                "_": "src/underscore", 
                "B": "src/backbone", 
                "test": "src/test01", 
                "text": "src/require.text"
            }, 
            "web": {
                "include": [
                    "$", 
                    "_", 
                    "B", 
                    "test"
                ], 
                "out": "<%= config.destDir %>/libs.js"
            }, 
            "app": {
                "include": [
                    "$", 
                    "_", 
                    "B", 
                    "test", 
                    "text!src/demo01.html"
                ], 
                "out": "<%= config.destDir %>/libs_app.js"
            }
        }
    }
}
复制代码

这里为了表现一点web与native的不同，我特意将web中少包含一个text文件，具体还得各位项目中去实践

如此一来，我们的代码需要做些许调整：

复制代码 
module.exports = function (grunt) {

  grunt.loadNpmTasks('grunt-contrib-requirejs');

  //type 打包app包还是web包，channel为频道名称，project为项目名称，这里对应gruntDemo，branch为其分支，默认与grunt目录为平行关系，佛则package.json里面应该有配置信息
  grunt.registerTask('build', 'require demo', function (type, channel, project, branch) {

    var path = '../' + channel + '/' + project + branch;
    grunt.log.debug('path: ' + path);

    //第一步，读取配置信息
    var cfg = grunt.file.readJSON(path + '/gruntCfg.json');
    cfg = cfg.requirejs.options;

    grunt.config.set('config', {
      srcDir: path,
      destDir: path + '/dest'
    });

    grunt.log.debug('param: ' + JSON.stringify(cfg));
    grunt.log.debug('param: ' + cfg[type]['include']);


    var taskCfg = {};
    taskCfg.options = {};
    taskCfg.options.baseUrl = cfg.baseUrl;
    taskCfg.options.paths = cfg.paths;
    taskCfg.options['include'] = cfg[type]['include'];
    taskCfg.options.out = cfg[type].out;


    grunt.config.set('requirejs', { main: taskCfg });

    //第二步，设置参数
    grunt.log.debug('param: ' + JSON.stringify(grunt.config()));

    //第三步跑任务
    grunt.task.run(['requirejs']);

  });





  grunt.registerTask('default', 'test demo', ['build', 'copy']);

}
复制代码

于是便可以运行了！！！

复制代码 
$ grunt build:app:gruntDemo:demo:01 --debug
Running "build:app:gruntDemo:demo:01" (build) task
[D] Task source: d:\grunt\Gruntfile.js
[D] path: ../gruntDemo/demo01
[D] param: {"baseUrl":"<%= config.srcDir %>","paths":{"$":"src/zepto","_":"src/u
nderscore","B":"src/backbone","test":"src/test01","text":"src/require.text"},"we
b":{"include":["$","_","B","test"],"out":"<%= config.destDir %>/libs.js"},"app":
{"include":["$","_","B","test","text!src/demo01.html"],"out":"<%= config.destDir
 %>/libs_app.js"}}
[D] param: $,_,B,test,text!src/demo01.html
[D] param: {"config":{"srcDir":"../gruntDemo/demo01","destDir":"../gruntDemo/dem
o01/dest"},"requirejs":{"main":{"options":{"baseUrl":"../gruntDemo/demo01","path
s":{"$":"src/zepto","_":"src/underscore","B":"src/backbone","test":"src/test01",
"text":"src/require.text"},"include":["$","_","B","test","text!src/demo01.html"]
,"out":"../gruntDemo/demo01/dest/libs_app.js"}}}}

Running "requirejs:main" (requirejs) task
[D] Task source: d:\grunt\node_modules\grunt-contrib-requirejs\tasks\requirejs.j
s
>> Tracing dependencies for: d:/gruntDemo/demo01/dest/libs_app.js
>> Uglifying file: d:/gruntDemo/demo01/dest/libs_app.js
>> d:/gruntDemo/demo01/dest/libs_app.js
>> ----------------
>> d:/gruntDemo/demo01/src/zepto.js
>> d:/gruntDemo/demo01/src/underscore.js
>> d:/gruntDemo/demo01/src/backbone.js
>> d:/gruntDemo/demo01/src/test01.js
>> d:/gruntDemo/demo01/src/require.text.js
>> text!src/demo01.html
复制代码

结语

我们这个星期花了三天时间一起学习了grunt打包相关的知识点，需要这些知识对您有用，搞这个东西还花费了不少心血呢！！！

若是文中有误请一并提出，后续若是这块有所得我们再一起总结吧



本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/p/3603319.html，如需转载请自行联系原作者

文章标签：
前端开发
JavaScript
HTML5
移动开发
存储
关键词：
前端应用
前端项目
前端grunt
范大脚脚
目录
相关文章
桃李春风一杯酒
|
2天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略，包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法，可以缩短启动时间，提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈，实现持续优化。
桃李春风一杯酒
8 0
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
桃李春风一杯酒
|
3天前
|
Dart 前端开发 开发工具
【Flutter前端技术开发专栏】Flutter入门指南：搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程，以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK，支持macOS、Linux和Windows。安装完成后，设置环境变量，然后通过`flutter doctor`验证安装。接着，使用`flutter create`命令创建新项目，进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
桃李春风一杯酒
17 0
【Flutter前端技术开发专栏】Flutter入门指南：搭建开发环境与第一个应用
桃李春风一杯酒
|
2天前
|
缓存 移动开发 前端开发
【专栏：HTML与CSS前端技术趋势篇】HTML与CSS在PWA（Progressive Web Apps）中的应用
【4月更文挑战第30天】PWA（Progressive Web Apps）结合现代Web技术，提供接近原生应用的体验。HTML在PWA中构建页面结构和内容，响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作，保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步，HTML与CSS在PWA中的应用将更广泛。
桃李春风一杯酒
21 10
桃李春风一杯酒
|
2天前
|
前端开发 JavaScript 搜索推荐
【专栏：HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构，语义化标签增进可读性，支持用户交互；CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战，需采取相应策略。未来，持续发掘HTML和CSS潜力，推动组件化开发创新，提升Web应用体验。
桃李春风一杯酒
14 8
桃李春风一杯酒
|
2天前
|
前端开发 持续交付 开发工具
【专栏：工具与技巧篇】版本控制与Git在前端开发中的应用
【4月更文挑战第30天】Git是前端开发中的必备工具，它通过分布式版本控制管理代码历史，支持分支、合并、回滚等操作，促进团队协作和冲突解决。在前端项目中，Git用于代码追踪、代码审查、持续集成与部署，提升效率和质量。优化协作包括制定分支策略、编写清晰提交信息、定期合并清理分支及使用Git钩子和自动化工具。掌握Git能有效提升开发效率和代码质量。
桃李春风一杯酒
10 2
桃李春风一杯酒
|
2天前
|
前端开发 JavaScript 安全
【TypeScript技术专栏】TypeScript在微前端架构中的应用
【4月更文挑战第30天】微前端架构通过拆分应用提升开发效率和降低维护成本，TypeScript作为静态类型语言，以其类型安全、代码智能提示和重构支持强化这一架构。在实践中，TypeScript定义公共接口确保跨微前端通信一致性，用于编写微前端以保证代码质量，且能无缝集成到构建流程中。在微前端架构中，TypeScript是保障正确性和可维护性的有力工具。
桃李春风一杯酒
9 0
桃李春风一杯酒
|
2天前
|
缓存 监控 前端开发
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
【4月更文挑战第30天】本文探讨了Flutter应用的性能调优策略和测试方法。性能调优对提升用户体验、降低能耗和增强稳定性至关重要。优化布局（避免复杂嵌套，使用`const`构造函数）、管理内存、优化动画、实现懒加载和按需加载，以及利用Flutter的性能工具（如DevTools）都是有效的调优手段。性能测试包括基准测试、性能分析、压力测试和电池效率测试。文中还以ListView为例，展示了如何实践这些优化技巧。持续的性能调优是提升Flutter应用质量的关键。
桃李春风一杯酒
9 0
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
桃李春风一杯酒
|
2天前
|
前端开发 Android开发 开发者
【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
【4月更文挑战第30天】本文探讨了使用Flutter开发混合应用的方法。混合应用结合Web技术和原生容器，提供快速开发和低成本维护。Flutter，一款现代前端框架，以其插件系统和高性能渲染引擎支持混合应用开发。通过创建Flutter项目、添加平台代码、使用WebView、处理平台间通信以及发布应用，开发者可构建跨平台混合应用。虽然混合应用有性能和用户体验的局限，但Flutter的跨平台兼容性和丰富的插件生态降低了开发成本。开发者应根据项目需求权衡选择。
桃李春风一杯酒
10 0
【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
桃李春风一杯酒
|
2天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter中的Web支持：构建跨平台Web应用
【4月更文挑战第30天】Flutter，Google的开源跨平台框架，已延伸至Web领域，让开发者能用同一代码库构建移动和Web应用。Flutter Web通过将Dart代码编译成JavaScript和WASM运行在Web上。尽管性能可能不及原生Web应用，但适合交互性强、UI复杂的应用。开发者应关注性能优化、兼容性测试，并利用Flutter的声明式UI、热重载等优势。随着其发展，Flutter Web为跨平台开发带来更多潜力。
桃李春风一杯酒
11 0
【Flutter前端技术开发专栏】Flutter中的Web支持：构建跨平台Web应用
桃李春风一杯酒
|
2天前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件，如`TabBar`、`Drawer`、`BottomSheet`，提升应用体验和美观度。使用高级组件能节省开发时间，提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时，自定义组件允许个性化设计和功能扩展，但也带来性能优化和维护挑战。参考Flutter官方文档和教程，深入学习并有效利用这些组件。
桃李春风一杯酒
10 0
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用

热门文章

最新文章

  • 1
    构建高效响应式Web界面：现代前端框架的比较
  • 2
    Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
  • 3
    前端最常见的JS面试题大全
  • 4
    layui：从崛起到蜕变，前端框架的华丽篇章
  • 5
    使用机器学习优化前端用户体验
  • 6
    前端代码整洁与规范之CSS篇
  • 7
    探索前端开发中的新趋势：WebAssembly 技术应用与展望
  • 8
    如何使用浏览器调试前端代码？
  • 9
    常见的前端加密方式有哪些？运用场景有哪些？
  • 10
    uniapp上传图片 前端以及java后端代码实现
  • 1
    借助chat-web前端开源项目搭建属于自己的ChatGPT镜像站
    137
  • 2
    构建高性能Web应用：前端性能优化的关键策略与实践
    59
  • 3
    构建响应式Web界面：现代前端开发的最佳实践
    43
  • 4
    前端开发中的响应式设计与移动优先原则
    29
  • 5
    探索现代Web应用中的微前端架构
    31
  • 6
    前端性能优化实践：从理论到实际操作
    32
  • 7
    构建高效前端项目：模块化与组件化策略
    32
  • 8
    前端发展趋势：WebAssembly、PWA 和响应式设计
    28
  • 9
    前端开发新趋势：Web3、区块链和虚拟现实
    40
  • 10
    架构的未来：微前端与微服务的融合
    64

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考