文档章节

压缩校验合并js之grunt搭建

溪语_8023
 溪语_8023
发布于 2017/08/21 17:11
字数 289
阅读 5
收藏 0

1.在说grunt先认识几个grunt配置中的几个单词,concat(合并文件),uglify(压缩文件),jshint(检测代码规范),watch(实时监听修改的文件)

2.grunt是基于nodejs,安装之前需要安装nodejs。

3.开始,进行项目的路径下,cmd——>npm init生成package.json,暂时没有这么多内容的,但是大致就是这样的

4.然后安装grunt : npm install grunt --save-dev               --save-dev这个命令使得package.json文件中出现 “grunt”:“^1.0.1”。

5.安装grunt中的各路插件了:

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

6.建立Gruntfile.js文件开始配置:

module.exports = function(grunt) {

  grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      concat: {
      //合并一下两个文件,合并后的文件名字为global.js
        dist: {
          src: ['slide.js', 'dialog.js'],
          dest: 'global.js',
        },
      },
      uglify: {
      //压缩合并后的文件
        compressjs: {
          files: {
            'global.min.js': ['global.js']
          }
        }
      },
      jshint: {
      //检查校验合并后的文件
        all: ['global.js']
      },
      watch: {
      //监听文件的改动并变化
        scripts: {
          files: ['slide.js','dialog.js'],
          tasks: ['concat','jshint','uglify']
        }
      },
  });

  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');


  grunt.registerTask('concatjs',['concat']);
  grunt.registerTask('compressjs',['concat','jshint','uglify']);
  grunt.registerTask('watchit',['concat','jshint','uglify','watch']);
  grunt.registerTask('default');

};

执行grunt watchit,便可以了。

© 著作权归作者所有

溪语_8023
粉丝 0
博文 27
码字总数 17461
作品 0
杭州
私信 提问
如何利用Grunt生成对应的Source Map文件,线上代码压缩使用

如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提供方便,比如线上的...

tinderfang
2015/03/30
0
0
Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置

grunt.initConfig方法 用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。 每个目标的具体设置,需要参考该模板的文档。就cssmin来讲,minify目标的参数具体含义...

菜鸟的进阶
2017/10/25
0
0
JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架

   Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台。Grunt 能够从模板快速创建项目,合并、压缩和校验 CSS & JS 文件,运行单元测试以及启动静态服务器。  ...

杨太化
2015/05/04
0
0
Emberjs 上手 - 使用Grunt进行项目组织与创建

在要开始构建Emberjs的应用前,首先考虑一个可以组织和管理好整个JavaScript项目的方法和工具,可以使用Ember-cli,也可以使用通用的JavaScript的构建工具Grunt。 为什么需要这样的工具呢?原...

YipChooli
2015/03/28
0
0
Yeoman:Web 应用开发流程与工具

随着 Web 2.0 和 HTML 5 的流行,现在的 Web 应用所能提供的功能和交互能力比之前传统的 Web 应用要强大很多。应用的很多实现逻辑被转移到了浏览器端来实现。浏览器不再只提供单一的数据接收...

IBMdW
2014/03/24
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

宜信开源|一个实例解析PaaS平台LAIN的9大杀手级功能

一、基于Docker的PaaS平台LAIN 在金融的场景下,LAIN 是为解放各个团队和业务线的生产力而设计的一个云平台。LAIN 正式上线已经大约两年,基本已经成熟,为宜信大数据创新中心各个团队提供了...

宜信技术学院
15分钟前
2
0
DBeaver调整编辑窗口字体大小

窗口-->首选项: 点击“编辑”之后,字体大小设为11的大小即比较合适。

BG2KNT
22分钟前
1
0
【Kubernetes社区之路】Slack沟通工具简介

什么是Slack Slack(https://slack.com) 是一款沟通工具,它与国内常见的微信、微博、QQ、钉钉有很大的不同,Slack主要用于工作讨论,可以让讨论更加高效。 Slack的口号便是让工作变得简单、...

恋恋美食
34分钟前
1
0
Visual Paradigm 教程[UML]:如何在SoaML中建模多方服务?

下载Visual Paradigm最新试用版 编写本教程是为了解释多方服务在SoaML方面的含义以及如何使用各种SoaML图表指定此类服务Visual Paradigm。 本教程中将使用的示例是通过在线银行账户纳税。您将...

xiaochuachua
35分钟前
0
0
SpringMVC 的Controller方法声明为private 或者 public 有什么区别

平常没有区别,都能正常处理请求。只有在使用AOP时会有问题: Controller方法声明为private时会出现获取到的注入service属性为null的问题,public方法才能正常获取注入的service。 原因如下:...

为了美好的明天
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部