zoukankan      html  css  js  c++  java
  • 实战案例--Grunt构建Web程序

    GruntJS构建Web程序。使用Gruntjs来搭建一个前端项目,然后使用grunt合并,压缩JS文件,熟练了node.js安装和grunt.js安装后,接下来来实战一个案例,案例是根据snandy大神的案例完成的,记录加深印象,mark

    一、安装node.js、grunt

    node.js 安装、图文详解学习笔记--Grunt、安装、图文详解 或是参考snandy大神的博客使用GruntJS构建Web程序 (1)

    二、项目步骤

    1. 新建项目Bejs
    2. 新建文件package.json
    3. 新建文件Gruntfile.js
    4. 命令行执行grunt任务

    三、新建项目Bejs

    d盘新建node根目录,然后再新建Bejs项目目录,Bejs下新建src文件,里面2个js,内容随意

    四、新建package.json

    package.json放在根目录下,它包含了该项目的一些元信息,如项目名称、描述、版本号,依赖包等。它应该和源码一样被提交到svn或git。package.json内容需符合JSON语法规范,如下

     1 {
     2   "name": "Bejs",
     3   "version": "0.1.0",
     4   "devDependencies": {
     5     "grunt": "~0.4.0",
     6     "grunt-contrib-jshint": "~0.1.1",
     7     "grunt-contrib-uglify": "~0.1.2",
     8     "grunt-contrib-concat": "~0.1.1"
     9   }
    10 }

    学习笔记--Grunt、安装、图文详解 中grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat则没有安装

    三个分别对于三个任务(task)

    • grunt-contrib-jshint js语法检查
    • grunt-contrib-uglify 压缩,采用UglifyJS
    • grunt-contrib-concat 合并文件

    此时,打开命令行工具进入到项目根目录,敲如下命令: npm install

    node_modules目录下多了node_modules文件夹

    五、新建文件Gruntfile.js

    Gruntfile.js也是放在项目根目录下,几乎所有的任务都定义在该文件中,它就是一个普通的js文件,里面可以写任意js代码而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。

    Gruntfile.js由以下内容组成

    1. wrapper函数,结构如下,这是Node.js的典型写法,使用exports公开API
    2. 项目和任务配置
    3. 载入grunt插件和任务
    4. 定制执行任务

    示例完成以下任务

    1. 合并src下的文件(ajax.js/selector.js)为domop.js
    2. 压缩domop.js为domop.min.js
    3. 这两个文件都放在dest目录下

    最终的Gruntfile.js如下

     1 module.exports = function(grunt) {
     2     // 配置
     3     grunt.initConfig({
     4         pkg : grunt.file.readJSON('package.json'),
     5         concat : {
     6             domop : {
     7                 src: ['src/ajax.js', 'src/selector.js'],
     8                 dest: 'dest/domop.js'
     9             }
    10         },
    11         uglify : {
    12             options : {
    13                 banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
    '
    14             },
    15             build : {
    16                 src : 'dest/domop.js',
    17                 dest : 'dest/domop.min.js'
    18             }
    19         }
    20     });
    21     // 载入concat和uglify插件,分别对于合并和压缩
    22     grunt.loadNpmTasks('grunt-contrib-concat');
    23     grunt.loadNpmTasks('grunt-contrib-uglify');
    24     // 注册任务
    25     grunt.registerTask('default', ['concat', 'uglify']);
    26 }; 

    六、执行grunt任务

    打开命令行,进入到项目根目录,敲 grunt

    打印成功,Bejs项目目录下多了dest文件夹,domop.js、domop.min.js

    七、测试Demo

    src增加其他js文件

    然后打开命令行,进入到项目根目录,敲 grunt

    执行成功

    参考网站:http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html

  • 相关阅读:
    Vue 2.x windows环境下安装
    VSCODE官网下载缓慢或下载失败 解决办法
    angular cli 降级
    Win10 VS2019 设置 以管理员身份运行
    XSHELL 连接 阿里云ECS实例
    Chrome浏览器跨域设置
    DBeaver 执行 mysql 多条语句报错
    DBeaver 连接MySql 8.0 报错 Public Key Retrieval is not allowed
    DBeaver 连接MySql 8.0报错 Unable to load authentication plugin 'caching_sha2_password'
    Linux系统分区
  • 原文地址:https://www.cnblogs.com/xbcq/p/3669015.html
Copyright © 2011-2022 走看看