Grunt实例

module.exports = function(grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON(‘package.json‘),
    clean:{//清除目标文件下文件
      huzhao:{
        src:"dest"
      }
    },
    uglify: {
      huzhao: {
        files: [{
          expand: true,
          cwd: ‘src‘, //js目录下
          src: ‘*.js‘, //所有js文件
          dest: ‘dest‘ //输出到此目录下
        }]
      }
    },
    cssmin:{//压缩css
      huzhao:{
         "files": {
          ‘dest/main.css‘: [‘src/*.css‘]
        }
      }
    },
    htmlmin:{//压缩html
      huzhao: {
        options: { // Target options
          removeComments: true,
          collapseWhitespace: true
        },
        files:[{
          expand: true, // Enable dynamic expansion.
          cwd: ‘src/‘, // Src matches are relative to this path.
          src: [‘*.html‘], // Actual pattern(s) to match.
          dest: ‘dest/‘, // Destination path prefix.
          ext: ‘.html‘, // Dest filepaths will have this extension.
          extDot: ‘first‘ // Extensions in filenames begin after the first dot
        }]
      }
    }
  });
  // 加载提供"uglify"任务的插件
  grunt.loadNpmTasks(‘grunt-contrib-clean‘);
  grunt.loadNpmTasks(‘grunt-contrib-copy‘);
  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
  grunt.loadNpmTasks(‘grunt-contrib-concat‘);
  grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
  grunt.loadNpmTasks(‘grunt-contrib-htmlmin‘);
  // 默认任务
  grunt.registerTask(‘huzhao‘, [‘clean:huzhao‘,‘uglify:huzhao‘, ‘cssmin:huzhao‘, ‘htmlmin:huzhao‘]);
}
时间: 2024-08-03 01:04:26

Grunt实例的相关文章

grunt 实例构建(四)

相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5加密 参考地址 原文地址:https://www.cnblogs.com/congxueda/p/9906513.html

初学seaJs模块化开发,利用grunt打包,减少http请求

原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —dist   //压缩后的目标文件夹 —lib   //各个模块 —drag    //拖拽模块 —scale   //缩放模块 —seajs    //seajs库 —seajs_drag    //入口的主文件main.js —main.js /*——————————————————————————

grunt入门讲解3:实例讲解使用 Gruntfile 配置任务

这个Gruntfile 实例使用到了5个 Grunt 插件: grunt-contrib-uglify grunt-contrib-qunit grunt-contrib-concat grunt-contrib-jshint grunt-contrib-watch 上面的uglify,concat,watch这三个插件用的最多,第一个插件是用来压缩文件的,第二个插件是用来合并文件的,第三个插件用来监听文件内容的,如果文件内容改变了,就会触发回调方法进行相应的处理. 我们一步一步来讲解这个 Gr

Grunt的初级应用

Grunt是什么呢? Grunt是JavaScript世界的构建工具.为什么要用构建工具?一句话:自动化.对于需要反复重复的任务,例如压缩(minification).编译.单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作.当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作. 为什么要使用Grunt? Grunt生态系统非常庞大,并且一直在增长.由于拥有数量庞大的插件可供选择,因此,你可以利用Grunt自动完成任何事,并且花

WebPack实例与前端性能优化

[前端构建]WebPack实例与前端性能优化 计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了.近年来Web前端开发领域朝着规范开发的方向演进.体现在以下两点: MVC研发构架.多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题...) 构建工具层出不穷.多多益处(提

Grunt:任务自动管理工具(收藏+转载)

原文:http://javascript.ruanyifeng.com/tool/grunt.html 安装 命令脚本文件Gruntfile.js Gruntfile.js实例:grunt-contrib-cssmin模块 常用模块设置 grunt-contrib-jshint grunt-contrib-concat grunt-contrib-uglify grunt-contrib-copy grunt-contrib-watch 其他模块 参考链接 在Javascript的开发过程中,经

boostraps+jekyll+sass/scss+less+grunt整合使用详细备忘

2014-08-25 http://www.w3cplus.com/preprocessor/nodejs-and-grunt-compile-sass-to-css.html 安装grunt sass支持,包含grunt watch boostraps的Gruntfile.js,package.json,直接考到新建的项目目录调整使用,运行npm install 安装依赖包,可以删减不必要的 A.整合方法 1.https://github.com/gruntjs/grunt-contrib-s

grunt快速入门

快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本号的 Node.js 被认为是不稳定的开发版. 在安装 Grunt 前,请确保当前环境中所安装的 npm 已经是最新版本,执行 npm update -g npm 指令进行升级(在某些系统中可能需要 sudo 指令). 如果你已经安装了 Grunt,现在需要参考一些文档手册,那就请看一看 Gruntfil

Grunt入门教程

引入:grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查 环境:grunt是基于nodejs运行的,所以需要有nodejs,在Nodejs中,安装grunt的命令行接口. 1 npm install -g grunt-cli 将grunt命令植入系统路径.通过nodejs的require查找到安装的grunt,就能在任意目录下运行grunt项目了. 在一个简单的实例中,慢慢享受grunt给前端所带来的便捷与随心所欲. 新建项