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,便可以了。

压缩校验合并js之grunt搭建的更多相关文章

  1. Gulpfile.js——编译、压缩、合并js和css文件

    gulp 一个入门教程:http://www.ydcss.com/gulp API文档地址:http://www.gulpjs.com.cn/docs/api/ 我的一个Low版的gulpfile v ...

  2. maven 压缩、合并 js, css

    转载自:http://blog.csdn.net/fangxing80/article/details/17639607 我们知道在 Web 应用开发中为了提高客户端响应速度,需要将页面使用的资源最小 ...

  3. 转:利用node压缩、合并js,css,图片

    1.安装nodejs http://nodejs.org/ 2.安装各自的node package js我用的是UglifyJS github地址:https://github.com/mishoo/ ...

  4. Maven插件wro4j-maven-plugin压缩、合并js、css详解

    1.    在pom.xml文件中,引入wro4j-maven-plugin插件 <plugin> <groupId>ro.isdc.wro4j</groupId> ...

  5. MVC4新功能...压缩和合并js文件和样式文件

    1.在App_Start文件夹中BundleConfig.cs类中添加相应的文件 1.1bundles.Add(new ScriptBundle("~/bundles/adminJs&quo ...

  6. MVC4中压缩和合并js文件和样式文件

    1.在App_Start文件夹中BundleConfig.cs类中添加相应的文件 1.1bundles.Add(new ScriptBundle("~/bundles/adminJs&quo ...

  7. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  8. 引用:使用grunt 压缩 合并js、css文件

    引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存 ...

  9. Grunt的配置及使用(压缩合并js/css)

    Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...

随机推荐

  1. Spring Cloud Eureka Server使用(注册中心)

    一.Spring Cloud Eureka 基于Netflix Eureka做了二次封装 由两个组件组成 Eureka Server 注册中心, 供服务注册的服务器 Eureka Client 服务注 ...

  2. 读DataSnap源代码(五)

    function TDSHTTPWebDispatcher.DispatchRequest(Sender: TObject; Request: TWebRequest; Response: TWebR ...

  3. Go 并发控制--WaitGroup的使用

    开发过程中,经常task之间的同步问题.例如,多个子task并发完成一部分任务,主task等待他们最后结束. 在Go语言,实现同步的一种方式就是WaitGroup. Example package m ...

  4. locate命令详解

    Linux locate命令 locate(locate) 命令用来查找文件或目录. locate命令要比find -name快得多,原因在于它不搜索具体目录,而是搜索一个数据库/var/lib/ml ...

  5. c++ 函数中的部分代码执行一次

    编程时有时需要将一段代码中的某一块只执行一次: #include<iostream> using namespace std; int fun1(int a) { static bool ...

  6. SourceInsight宏插件1(非常好用,强力推荐)

    对于一直使用sourceinsight编辑C/C++代码的工程师们,sourceinsight是一个非常好用的编辑工具可以任意定位,跳转,回退,本人一直使用该工具做C/C++开发,sourceinsi ...

  7. ML: 降维算法-PCA

            PCA (Principal Component Analysis) 主成份分析 也称为卡尔胡宁-勒夫变换(Karhunen-Loeve Transform),是一种用于探索高维数据结 ...

  8. mig_7series DDR控制器的配置

    mig_7series DDR控制器的配置

  9. python cntl使用

    import sys 2 import time 3 import fcntl 4 5 class FLOCK(object): 6 7 def __init__(self, name): 8 sel ...

  10. web前端性能调优(一)

    最近2个月一直在做手机端和电视端开发,开发的过程遇到过各种坑.弄到快元旦了,终于把上线了.2个月干下来满满的的辛苦,没有那么忙了自己准备把前端的性能调优总结以下,以方便以后自己再次使用到的时候得于得心 ...