自动化构建工具 grunt [国外使用较多]

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量112 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/tianxiaxuange/p/11012116.html
版权

Grunt

代码： https://github.com/RyenToretto/grunt-gulp-webpack

环境： node 版本 > 0.8

特点： 

自动化： 压缩、合并、编译等等操作，前提是 Gruntfile.js 文件配置好了

Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的

grunt 插件： grunt 作为大脑，指挥插件们工作

contrib-官方维护的插件

 

项目结构： 

1. 全局安装 grunt 脚手架 命令行接口 grunt-cli

sudo npm install -g grunt-cli

调用与 Gruntfile.js 在同一目录中 Grunt

2. 局部安装 grunt

sudo npm install --save-dev grunt

每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。

正是由于这一机制，你可以在项目的任意子目录中运行 grunt，更多详情请阅读源码

3. 编辑 Gruntfile.js

  • 在下面列出的这个 Gruntfile.js 中

package.json 文件中的项目元数据（metadata）被导入到 Grunt 配置中

 grunt-contrib-uglify 插件中的 uglify 任务（task）被配置为压缩（minify）源码文件

并依据上述元数据动态生成一个文件头注释。

当在命令行中执行 grunt 命令时，uglify 任务将被默认执行。

commonJS 模块化语法 暴露

  • module.exports = function(grunt) {

  // 初始化配置 grunt 任务.
  grunt.initConfig({
  });

  // 当 grunt 执行时，要加载的插件。
  // grunt.loadNpmTasks('');

  // 注册 构建任务 列表。
  grunt.registerTask('default', []); // 默认任务，依赖为 []
};

4. 加入 合并 js 的插件 grunt-contrib-concat 

(1) sudo npm install --save-dev grunt-contrib-concat

(2) 修改 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任务.
    grunt.initConfig({
        concat: {
            options: {
                separator: ';', // 连接符, 两个 js 文件之间 以 ; 连接
            }, // 选项
            dist: {
                src: ['src/js/*.js'], // 要合并的 源文件
                dest: 'dist/built.js', // 输出到的 新文件
            }, // 合并
        }, // 执行任务的任务名
    });

    // 当 grunt 执行时，要加载的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');

    // 注册 构建任务 列表。
    grunt.registerTask('default', []); // 默认任务，依赖为 []

};

(3) 执行 concat 任务

grunt concat

(4) 科学的 Gruntfile.js打包路径： 

(5) index.html 调用下 js 看看效果

  • <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="shortcut icon" href="https://img-yunzhi.cdn.bcebos.com/yz-favicon.ico" />
    <link rel="bookmark" href="https://img-yunzhi.cdn.bcebos.com/yz-favicon.ico" type="image/x-icon" />
    <title>自动化构建 - grunt</title>

    <script type="text/javascript" src="./static/js/fastclick.js"></script>
  </head>
  <body>
    <div id="app"></div>




    <script type="text/javascript">
      if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
          FastClick.attach(document.body);
        }, false);
      }
      if(!window.Promise) {
        document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
      }    /* 解决点击响应延时 0.3s 问题 */
    </script>
    <script type="text/javascript" src="./build/js/build.js"></script>
  </body>
</html>

5. 加入 压缩 js 的插件 grunt-contrib-uglify , 注册自动化任务数组

(1) sudo npm install --save-dev grunt-contrib-uglify 

(2) 修改 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任务.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';', // 连接符, 两个 js 文件之间 以 ; 连接
            }, // 选项
            dist: {
                src: ['src/js/*.js'], // 要合并的 源文件
                dest: 'build/js/build.js', // 输出到的 新文件
            }, // 合并
        }, // concat 执行 合并任务 的任务名
        uglify: {
            options: {
                // 压缩文件的 顶部注释
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                    '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            build: {
                files: {
                    'build/js/build.min.js': ['build/js/build.js']
                }
            }
        } // uglify 执行 压缩任务 的任务名
    });

    // 当 grunt 执行时，要加载的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // 注册 构建任务 列表。
    grunt.registerTask('default', [
        'concat',
        'uglify'
    ]); // 默认任务，依赖为 [], 执行 'grunt default' / 'grunt' 后，会顺序执行数组里的任务
};

(3) 执行 grunt 

6. 默认任务的 数组，会同步，顺序执行，所以先后顺序很重要

7. 加入 js-hint 语法检查插件

(1) sudo npm install --save-dev grunt-contrib-jshint

(2) 创建并配置 .jshintrc 文件

  • {
    "curly": true,
    "eqeqeq": true,
    "eqnull": true,
    "expr": true,
    "immed": true,
    "newcap": true,
    "noempty": true,
    "noarg": true,
    "regexp": true,
    "browser": true,
    "devel": true,
    "node": true,
    "boss": false,

    "undef": true,
    "asi": false,
    "predef": [ "define", "BMap", "angular", "BMAP_STATUS_SUCCESS"]
}

(3) 配置 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任务.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';', // 连接符, 两个 js 文件之间 以 ; 连接
            }, // 选项
            dist: {
                src: ['src/js/*.js'], // 要合并的 源文件
                dest: 'build/js/build.js', // 输出到的 新文件
            }, // 合并
        }, // concat 执行 合并任务 的任务名
        uglify: {
            options: {
                // 压缩文件的 顶部注释
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                    '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            build: {
                files: {
                    'build/js/build.min.js': ['build/js/build.js']
                }
            }
        }, // uglify 执行 压缩任务 的任务名
        jshint : {
            options: {
                jshintrc : '.jshintrc' //指定配置文件
            },
            build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
        },
    });

    // 当 grunt 执行时，要加载的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');

    // 注册 构建任务 列表。
    grunt.registerTask('default', [
        'concat',
        'uglify',
        'jshint'
    ]); // 默认任务，依赖为 [], 执行 'grunt default' / 'grunt' 后，会顺序执行数组里的任务
};

(4) 构建

grunt

8. 加入 合并压缩 css 的插件

(1) sudo npm install --save-dev grunt-contrib-cssmin

(2) 配置 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任务.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';', // 连接符, 两个 js 文件之间 以 ; 连接
            }, // 选项
            dist: {
                src: ['src/js/*.js'], // 要合并的 源文件
                dest: 'build/js/build.js', // 输出到的 新文件
            }, // 合并
        }, // concat 执行 合并任务 的任务名
        uglify: {
            options: {
                // 压缩文件的 顶部注释
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                    '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            build: {
                files: {
                    'build/js/build.min.js': ['build/js/build.js']
                }
            }
        }, // uglify 执行 压缩任务 的任务名
        jshint : {
            options: {
                jshintrc : '.jshintrc' //指定配置文件
            },
            build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
        }, // 语法检查插件
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            build: {
                files: {
                    'build/css/build.min.css': ['src/css/*.css']
                }
            }
        } // css 合并压缩插件
    });

    // 当 grunt 执行时，要加载的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // 注册 构建任务 列表。
    grunt.registerTask('default', [
        'concat',
        'uglify',
        'jshint',
        'cssmin'
    ]); // 默认任务，依赖为 [], 执行 'grunt default' / 'grunt' 后，会顺序执行数组里的任务
};

(3) 构建

grunt

9. 实现 watch 监视文件修改任务，实现自动打包编译

(1) sudo npm install --save-dev grunt-contrib-watch

(2) 修改 Gruntfile.js

  • module.exports = function(grunt) {
    // 初始化配置 grunt 任务.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';', // 连接符, 两个 js 文件之间 以 ; 连接
            }, // 选项
            dist: {
                src: ['src/js/*.js'], // 要合并的 源文件
                dest: 'build/js/build.js', // 输出到的 新文件
            }, // 合并
        }, // concat 执行 合并任务 的任务名
        uglify: {
            options: {
                // 压缩文件的 顶部注释
                banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
                    '<%= grunt.template.today("yyyy-mm-dd") %> */'
            },
            build: {
                files: {
                    'build/js/build.min.js': ['build/js/build.js']
                }
            }
        }, // uglify 执行 压缩任务 的任务名
        jshint : {
            options: {
                jshintrc : '.jshintrc' //指定配置文件
            },
            build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
        }, // 语法检查插件
        cssmin: {
            options: {
                shorthandCompacting: false,
                roundingPrecision: -1
            },
            build: {
                files: {
                    'build/css/build.min.css': ['src/css/*.css']
                }
            }
        }, // css 合并压缩插件
        watch : {
            scripts : {
                files : ['src/js/*.js', 'src/css/*.css'],
                tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
                options : {spawn : false}//增量更新---全量更新
            }
        }
    });

    // 当 grunt 执行时，要加载的插件。
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 注册 构建任务 列表。
    grunt.registerTask('default', [
        'concat',
        'uglify',
        'jshint',
        'cssmin'
    ]); // 默认任务，依赖为 [], 执行 'grunt default' / 'grunt' 后，会顺序执行数组里的任务
    grunt.registerTask('build', ['default']);
    grunt.registerTask('dev', ['default', 'watch']);
};

(3) grunt dev

 

转载于:https://www.cnblogs.com/tianxiaxuange/p/11012116.html

aof26372
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端自动化构建工具
小李不吃肉
06-12 524
一、什么是自动化 构建工具 就是工程化、自动化思想在 前端开发的 体现，将一些列流程 用代码去实现，让代码自动化地执行这一系列复杂地流程，将源代码转化成可以执行地js css html; 代码转换：将 TypeScript 编译成JavaScript、将 CSS 编译成 CSS等。 文件优化：压缩JavaScript、CSS、HTML 代码，压缩合并图片等。 代码分割：提取多个页面的公共代...
如何沉迷于工作流程自动化
04-04
Grunt是较早出现的自动化工具，它采用配置文件（Gruntfile.js）来定义任务和依赖关系。Grunt的强项在于其丰富的插件库，覆盖了从文件操作到代码质量检查的各种需求。然而，由于其基于回调的异步编程模型，Grunt在...
利用 Grunt （几乎）无痛地做前端开发 (一)之单元测试
weixin_34343308的博客
06-08 85
前言 如果你想开发一个js应用，甭管多简单，都要先创建整个宇宙 来看看我们的Javascript小宇宙: 确定如何根据需求、功能划分模块，如何将代码分成多个文件开发，合成一个发布 保证上一条的同时，使用 Coffeescript、SCSS/LESS 等技术 保证上2条的同时，想想怎么在浏览器的刷新后一切都最新 保证上3条的同时，想想怎么在开发、测试、生产、预发布环境中都...
利用grunt+browserify预编译js模板文件，支持commonJS加载
weixin_30641999的博客
08-19 119
　　在使用undersocre.js的模板时，有个显著问题，就是要把html代码写到js文件里面，非常痛苦，一不留神写错了，导致各方面问题。 而且，如果要修改模板，就会非常麻烦而且容易出错。 　　有没有一种方法可以实现把模板文件放在单独文件里，用的时候直接加载过来呢？ 　　最初，我采用了seajs的text插件，或者requireJS的text插件来动态加载模板，感觉棒棒哒！ 　　但是，动...
JavaScript编码风格
wjjiang917的专栏
07-11 497
一些达成共识的JavaScript编码风格约定 http://www.csdn.net/article/2013-07-11/2816196-javascript-code-style-guide JavaScript Style Guide 1. Linting Use JSHint to detect errors and potential probl
JavaScript自动化构建工具grunt、gulp、webpack介绍
Rain_dan的博客
08-08 612
前端开发自动化工作流工具，JavaScript自动化构建工具grunt、gulp、webpack介绍 前端开发自动化工作流工具，JavaScript自动化构建工具grunt、gulp、webpack介绍 前端自动化，这样的一个名词听起来非常的有吸引力，向往力。当今时代，前端工程师需要维护的代码变得及为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越
自动化构建
shuzhong_wjp的博客
07-11 251
自动化构建 开发行业中的自动化构建 就是把我们开发中写的源代码自动转换成可以在生产环境中运行的代码。 一般我们会把这个过程称为自动化构建工作流，作用是让我们脱离运行环境兼容带来的种种问题，在开发阶段使用一些提高效率的语法规格和标准。 ECMAScript新语法提高编码效率和代码质量 Sass增强css的可编程性 模板引擎抽象页面中重复的html 通过自动化构建可以将上述不被浏览器支持的特性转换成能够直接运行的代码。 浏览器使用sass基本使用 安装sass模块 yarn add sass --dev
自动化构建与grunt
weixin_41962912的博客
12-14 209
一、自动化构建 简介: 自动化指的是机器代替手工完成工作，构建可以理解为转换，就是把一个东西转换为另外的一些东西。总的来说自动化构建就是把开发阶段写出来的源代码自动化去转换成生产环境当中可以运行的代码或者程序，这样的转行的过程称为自动化构建工作流，这样做是尽可能让我们脱离运行环境兼容带来的问题。在开发阶段去使用一些提高效率的语法、规范和标准，比如开发网页应用时，可以运用ECMAScript NEXT提高编码效率和质量，利用sass增强css的可编程性，再去借助模板引擎抽象页面中重复的html，这些用法.
JavaScript性能优化-脚手架工具及自动化构建（12）
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
11-22 330
Part1 · JavaScript【深度剖析】 JavaScript性能优化-工具及代码优化 文章说明：本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结，学徒之心，仅为分享。如若有误，请在评论区支出，如果您觉得专栏内容还不错，请点赞、关注、评论。共同进步！ 上一篇：【JavaScript性能优化-工具及代码优化】 本篇主要内容是前端脚手架工具及自动化构建 超长文、多图预警！！！超长文、多图预警！！！ 一、脚手架工具 脚手架的本质作用：创建项目基础结构、提供项目规范和约定 相同的
常用自动化构建工具
qq_41923008的博客
11-25 1278
介绍 自动化构建工作流 就是 把开发出来的源代码自动化转换成生产环境中可以运行的代码或者程序 脱离运行环境兼容带来的问题 开发阶段去使用高效率的语法、规范和标准 构建转换那些不被支持的特性 常用的自动化构建工具 Grunt Gulp FIS Grunt工作过程基于临时文件，构建速度较慢 ，每一步都会有磁盘读写的操作，超大型项目会很慢，生态完善 Gulp很好解决了构建速度问题，基于 内存实现，默认支持同时执行多个任务，生态完善 FIS更像是捆绑套餐，把项目中典型的需求全部集成到内部了，资源加
js压缩工具.zip
09-09
- Gulp：一个基于Node.js的自动化构建工具，可以配合插件实现JS压缩。 - Grunt：另一个流行的Node.js构建工具，也有许多用于压缩JS的插件。 - Webpack：现代的模块打包工具，不仅可以压缩JS，还能处理其他类型的...
javascript格式化和压缩工具
11-06
在实际开发中，这些工具经常结合使用，比如在构建流程中，我们可以利用Webpack、Gulp或Grunt等构建工具，集成Prettier进行代码格式化，再结合UglifyJS或Terser进行压缩。这样不仅可以确保代码质量，还能显著提升页面...
Pageres是一款图片自动抓取工具
08-08
在JavaScript开发中，Pageres可以与前端构建工具如Gulp或Grunt结合，作为自动化工作流的一部分。这样，在每次代码变动后，都能自动更新截图，帮助开发者实时监控页面的变化。 压缩包"**sindresorhus-pageres-96113...
JS压缩工具
06-01
在实际开发中，开发者通常会将JS压缩集成到自动化构建流程中，比如使用Grunt、Gulp或Webpack等工具。这些工具能够自动检测文件变化，当JS文件更新时立即进行压缩，确保部署的代码始终是最小化的。 总的来说，JS压缩...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 208
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
【React 】开发环境搭建详细指南
lph159的博客
07-24 982
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
VUE中的重点*
qq_61132537的博客
07-22 928
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 520
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
Grunt中文指南：自动化构建工具的Node.js入门
Grunt中文文档详细介绍了Grunt这一强大的JavaScript构建工具，它在开发过程中用于自动化管理和执行常见的开发任务，如代码压缩、编译、单元测试和代码质量检查等，以提高开发效率和代码质量。Grunt的核心理念是自动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值