zoukankan      html  css  js  c++  java
  • Nodejs的Gruntjs使用一则

    Gruntjs是前端项目构建工具,基于nodejs命令。有些js项目是基于Gruntjs构建的,如Jquery。

    Gruntjs主要功能有:

    1.合并文件。

    2.压缩html,js,css,图片文件。

    3.语法检测。

    4.单元测试。

    5.watch功能。

    本文主要介绍watch配合chrome浏览器插件LiveReload实现网页自动刷新功能。

    Nodejs安装

    下载nodejs,官网地址 http://nodejs.org/ 下载最新版本按照提示下一步安装即可。

    Gruntjs的安装

    Gruntjs是基于Nodejs的,安装前要保证Nodejs环境成功安装,每个Gruntjs都包括两个文件:

    1.package.json:依赖模块和用到的变量说明等,如:version,name。

    2.Gruntfile.js:node module写法的任务管理文件。

    package.json

    例如我的package.json内容如下:

    {
    "name": "mitunes",
    "version": "1.0.0",
    "description": "mitunes",
    "devDependencies": {
      "grunt-shell": "~0.2.2",
      "grunt-contrib-watch": "~0.4.4"
      }
    }

    如果安装了新的插件,那么这个package.json会自动更新的,或者修改它然后执行npm install,也可以安装对应的插件。

    Gruntfile.js

    Gruntfile.js是node module格式的任务管理文件,如下:

    module.exports = function(grunt) {
    grunt.initConfig({
    watch: {
      files: ['../*.html','../js/*.js','../css/*.css'],
      options: {
        livereload: true
      }
    }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
    };

    运行Grunt

    1.任意新建一个文件夹,例如:

    D:work odejs,新建的nodejs文件夹然后添加package.json和Gruntfile.js文件

    2.打开cmd进入到nodejs文件夹,运行 npm install命令,例如:

    此时文件夹下多出一个文件夹node_modules。

    3.输入命令grunt wacth,例如:

    安装chrome浏览器插件LiveReload

    例如:

    完成

    chrome打开你的网站使你的网站引用的静态文件指向Gruntfile.js中watch的文件或目录,开启liveReload插件,此时修改你的网站静态文件看到chrome自动刷新。

    如何修改网站静态文件指向本地,参考:Fiddler的简单使用

  • 相关阅读:
    jmeter之jmx和控件介绍
    Jmeter使用1
    jmeter组件之聚合报告分析
    响应断言
    jmeter组件介绍-线程组、http采样器、结果树
    jmeter目录文件讲解和切换语言
    jmeter 学习 -安装
    关于去除input type='file'改变组件的默认样式换成自己需要的样式的解决方案
    js根据id、value值对checkbox设置选中状态
    javaweb简单的实现文件下载及预览
  • 原文地址:https://www.cnblogs.com/dengnan/p/3248401.html
Copyright © 2011-2022 走看看