`
wyzxzws
  • 浏览: 392578 次
  • 性别: Icon_minigender_1
  • 来自: dazhou
社区版块
存档分类
最新评论

两步搞定grunt学习之旅

 
阅读更多

闲来无聊百度、谷歌发现一好东西,原来需要手动操作的现在就用grunt搞定了,O(∩_∩)O哈哈~

最重要的两个文件:package.jsonGruntfile.js

 

===============================开始动手============================================

配置文件package.json:

{
  "name": "demo",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-copy": "^0.6.0",
    "grunt-contrib-cssmin": "~0.5.0",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

 

 

配置文件Gruntfile.js:

 

module.exports = function (grunt) {
//项目配置
    grunt.initConfig({
        uglify: {//javascript压缩
            build: {
                files: [
                    {
                        expand: true,
                        cwd: 'src/static/h5v3/script',
                        src: '**/*.js',
                        dest: 'dest/static/h5v3/script'
                    }
                ]
            }
        },
        cssmin: {//css压缩
            compress: {
                files: {
                    'dest/static/h5v3/css/style.css': [
                        "src/static/h5v3/css/*.css",
                        "src/static/h5v3/css/**/*.css"
                    ]
                }
            }
        },
        copy: {//拷贝目录
            script: {
                expand: true,
                cwd: 'src',
                src: ['**'],
                dest: 'dest',
                options: {
                    process: function (content, srcpath) {
                        if (srcpath.indexOf("static/h5v3/css") > -1) {
                            console.log("h5v3---css 不用拷贝。。。");
                            return;
                        } else {
                            return content;
                        }
                    }
                }
            }
        },
        clean: {//删除不想要的文件及目录
            build: {
                src: [ 'dest/static/h5v3/css' ]
            }
        }
    });

//加载相应模块
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
//启动任务了
    grunt.registerTask('default', ['copy', 'clean', 'cssmin', 'uglify']);
}

 =================================配置结束=========================================

注运行效果见附件O(∩_∩)O哈哈~

 

  • 大小: 99.1 KB
  • 大小: 100.9 KB
  • 大小: 132.2 KB
  • 大小: 90.9 KB
  • 大小: 105.8 KB
  • 大小: 96.5 KB
分享到:
评论

相关推荐

    grunt学习资料

    **Grunt 学习资料详解** Grunt 是一个基于任务的JavaScript构建工具,它通过预设的任务自动化项目构建过程,包括编译、测试、清理、压缩等。在前端开发中,Grunt 可以极大地提高工作效率,使得开发者能够专注于代码...

    grunt学习笔记

    **Grunt 学习笔记** Grunt 是一个基于任务运行器的 JavaScript 工具,它在前端开发领域中被广泛使用,主要用于自动化构建、测试、压缩、合并等任务,极大地提高了开发效率。Grunt 依赖于 Node.js 环境,并通过 npm...

    grunt-cli模块

    **Grunt CLI模块详解** Grunt CLI(Command Line Interface)是Grunt的命令行界面工具,它是Grunt工作流程中的核心部分,允许开发者在终端中执行自动化任务。Grunt是JavaScript的世界里一个流行的构建工具,它能...

    学习grunt

    **Grunt 学习教程** Grunt 是一个广泛使用的JavaScript任务运行器,它自动化了前端开发中的许多重复性工作,如文件编译、合并、压缩、测试等。本教程将帮助你了解Grunt的基本概念、安装步骤以及如何配置和运行...

    Grunt入门练习Demo

    **Grunt入门练习Demo** Grunt,作为JavaScript的构建工具,是前端开发中不可或缺的一部分。...Grunt的强大之处在于它的灵活性和可扩展性,你可以根据需要添加更多任务和插件,打造属于自己的高效前端开发环境。

    grunt-cli压缩包-0.1.13版本

    `grunt-cli`是Grunt(一个JavaScript任务运行器)的命令行接口,它允许开发者在命令行中执行Grunt任务。这个压缩包包含了`grunt-cli`的0.1.13版本,这是一个早期但仍然被一些项目依赖的版本。在这个版本中,除了`...

    Grunt前端开发工具部署

    **Grunt前端开发工具部署** Grunt 是一个广泛使用的JavaScript任务运行器,它极大地提高了前端开发者的工作效率。Grunt 靠的是配置文件`Gruntfile.js`,在这个文件中,开发者可以定义一系列自动化任务,比如编译...

    grunt.js cookbook

    ### Grunt.js Cookbook知识点概述 ...通过学习本书,读者不仅能够掌握Grunt.js的基本使用方法,还能深入了解如何利用Grunt.js来优化开发流程、提高生产力。无论是初学者还是有一定经验的开发者,都能够从中获益匪浅。

    Grunt 离线安装包

    Grunt 的强大之处在于其丰富的插件生态系统。例如,`grunt-contrib-concat` 可以用来合并多个 JavaScript 文件,`grunt-contrib-uglify` 可以压缩 JavaScript,`grunt-contrib-less` 编译 Less 到 CSS,还有 `grunt-...

    grunt项目构建样例

    **Grunt项目构建样例详解** 在Web开发中,项目构建是提高开发效率和优化生产环境资源的关键步骤。`Grunt`是一个JavaScript任务运行器,它允许开发者通过配置文件定义一系列自动化任务,如代码编译、文件压缩、单元...

    grunt-contact 模块

    `grunt-contact`模块是Grunt工作流中的一个插件,用于简化前端开发过程中的任务自动化。Grunt是一款基于JavaScript的任务运行器,它可以帮助开发者执行预处理、编译、压缩、测试等一系列构建任务。在这个场景中,`...

    grunt demo

    Grunt 的强大之处在于其丰富的插件生态。例如,`grunt-contrib-concat` 用于合并文件,`grunt-contrib-uglify` 可以压缩 JavaScript 代码,`grunt-contrib-watch` 能监听文件变化并自动执行任务。通过 npm,你可以...

    Grunt安装与使用

    **Grunt安装与使用** Grunt是JavaScript世界中的一款任务自动化工具,它允许开发者通过配置文件定义一...通过下载提供的资源,你可以逐步学习和实践Grunt的安装与使用,进一步掌握JavaScript项目的自动化构建流程。

    Grunt的实例代码(快速理解Grunt的用法)(内含代码注释)

    Grunt是JavaScript的一个任务运行器,它通过自动化工作流程来...学习Grunt不仅能够提升你的前端构建能力,也能让你对整个开发流程有更深入的理解。通过这个实例代码,你应该能够快速上手并熟练运用Grunt进行项目构建。

    grunt-1.4.1.tar.gz

    在项目中,Gruntfile.js是Grunt的配置文件,它包含两个主要部分:`grunt.initConfig()`用于定义任务配置,`grunt.loadNpmTasks()`用于加载所需插件。例如,以下配置将实现JavaScript文件的合并和压缩: ```...

    Grunt自动化加密js环境

    在IT行业中,自动化工具的使用可以极大地提升开发效率和代码质量。Grunt是JavaScript的一个构建工具,它允许开发者通过配置任务来...通过学习和实践这个环境,你可以更好地掌握JavaScript项目管理和自动化工具的使用。

    grunt 打包工具 混淆工具

    **Grunt:JavaScript的世界里的构建大师** 在JavaScript开发领域,自动化工具是不可或缺的一部分,而Grunt就是其中的一款强大且流行的构建工具。Grunt允许开发者通过配置文件定义一系列的任务,包括编译、测试、...

    grunt前端构建工具

    Grunt的强大之处在于其丰富的插件生态系统。通过`npm install grunt-plugin-name --save-dev`命令,你可以安装各种插件以扩展Grunt的功能,如处理CSS、处理图像、处理模板语言、测试代码质量等。例如,`grunt-...

    grunt代码优化管理工具源码

    在grunt中,这个过程通常由两个插件完成——`grunt-contrib-uglify`用于JavaScript代码的压缩,`grunt-contrib-concat`用于代码的合并。通过阅读源码,我们可以发现这些插件使用了诸如uglify-js和lodash等库,它们...

    Grunt中文文档.doc

    一个标准的Grunt项目通常包含两个核心文件: 1. `package.json`:存储项目元数据,包括依赖库的版本信息。 2. `Gruntfile`:默认名为`Gruntfile.js`或`Gruntfile.coffee`,用来配置任务和加载插件。 在`package....

Global site tag (gtag.js) - Google Analytics