Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON(‘package.json‘),
        clean: {
            Task_001: {
                expand: true,
                src: [‘build/**‘, ‘www/**‘]
            }
        },
        uglify: //js代码压缩 {
        options: {
            mangle: false,
            //不混淆变量名
            //stripBanners:‘all‘,
            //banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n‘, //添加header
            //footer:‘\n/*! <%= pkg.name %> 最后修改于: <%= grunt.template.today("yyyy-mm-dd") %> */‘//添加footer
        },
        Task_001: //任务一 {
        files: [{
            expand: true,
            //如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
            cwd: "src/js",
            //src目录下
            src: "**/*.js",
            //所有的文件夹中的js文件
            dest: "build/js" //放在build文件夹中的js文件夹中
        }, {
            expand: true,
            //如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
            cwd: "src/js",
            //src目录下
            src: "*.js",
            //所有的js文件
            dest: "build/js" //放在build文件夹中的js文件夹中
        }]
    }
    }, connect: {
        Task_001: {
            options: {
                port: 8060,
                hostname: ‘*‘,
                open: true,
                keepalive: true,
                onCreateServer: function(server, connect, options) {
                    console.log(server);
                    console.log(connect);
                    console.log(options);
                }
            }
        }
    }

    cssmin: {
        options: {
            report: ‘gzip‘
        },
        Task_001: {
            files: [{
                expand: true,
                //如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
                cwd: ‘src/css‘,
                //css目录下
                src: "**/*.css",
                //所有的文件夹中的css文件
                dest: "build/css" //放在build文件夹中的css文件夹中
            }, {
                expand: true,
                //如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
                cwd: ‘src/css‘,
                //css目录下
                src: "*.css",
                //所有的css文件
                dest: "build/css" //放在build文件夹中的css文件夹中
            }]
        }
    },
    imagemin: {
        Task_001: {
            options: {
                optimizationLevel: 3 //定义 PNG 图片优化水平
            },
            files: [{
                expand: true,
                //如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
                cwd: ‘src/images‘,
                //images目录下
                src: ‘*.{png,jpg,jpeg,gif}‘,
                //所有的img文件
                dest: ‘build/images‘ //放在build文件夹中的images文件夹中
            }, {
                expand: true,
                //如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
                cwd: ‘src/images‘,
                //images目录下
                src: ‘**/*.{png,jpg,jpeg,gif}‘,
                //所有的img文件
                dest: ‘build/images‘ //放在build文件夹中的images文件夹中
            }]
        }
    },
    htmlmin: {
        //https: //www.npmjs.com/package/html-minifier
        options: {
            removeComments: true,
            //删除html注释
            removeCommentsFromCDATA: true,
            //删除带HTML注释脚本和样式
            removeCDATASectionsFromCDATA: true,
            //从脚本删除CDATA节和风格元素
            collapseWhitespace: true,
            //崩溃的空白,导致文本节点在文档树。
            conservativeCollapse: true,
            //总是省略空间必须使用与collapseWhitespace = true
            collapseInlineTagWhitespace: true,
            //之间不要留下任何空间显示:内联元素时崩溃。必须使用与collapseWhitespace = true
            preserveLineBreaks: false,
            //(false既开启超级压缩)总是省略换行之间的空白标签包含一个换行符。必须使用与collapseWhitespace = true
            collapseBooleanAttributes: true,
            //省略属性值从布尔属性
            removeTagWhitespace: true,
            //尽可能消除之间的空间属性。
            removeAttributeQuotes: true,
            //删除引号属性。
            removeRedundantAttributes: true,
            //删除属性值匹配时违约。
            preventAttributesEscaping: true,
            //防止逃跑的属性的值。
            useShortDoctype: true,
            //替换的doctype短(HTML5)doctype
            removeEmptyAttributes: true,
            //删除所有空格作属性值
            removeScriptTypeAttributes: true,
            //删除type = " text / javascript脚本标签。其他类型属性值剩下完好无损。
            removeStyleLinkTypeAttributes: true,
            //删除类型= " text / css "从风格和链接标记。其他类型属性值剩下完好无损
            removeOptionalTags: true,
            //删除没有要求标签
            removeEmptyElements: true,
            //删除所有元素空内容
            keepClosingSlash: true,
            //保持尾部的斜杠单元素
            caseSensitive: true,
            //以区分大小写的方式处理属性(用于自定义HTML标记。)
            minifyJS: true,
            //压缩Javascript脚本元素和事件属性(使用UglifyJS)
            minifyCSS: true,
            //压缩CSS样式元素和风格属性(使用clean-css)
            minifyURLs: true,
            //压缩url在不同属性(使用relateurl)
            includeAutoGeneratedTags: true,
            //插入标记生成的HTML解析器
            quoteCharacter: true //类型的引用使用属性值(“或”)
        },
        Task_001: {
            files: [{
                expand: true,
                //如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
                cwd: "src/app",
                //app目录下
                src: "**/*.html",
                //所有的文件夹中的html文件
                dest: "build/app" //放在build文件夹中的html文件夹中
            }, {
                expand: true,
                //如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
                cwd: "src/app",
                //html目录下
                src: "*.html",
                //所有的html文件
                dest: "build/app" //放在build文件夹中的html文件夹中
            }]
        }
    },
    copy: //将编译好的文件,复制到我的项目中
    {
        Task_001: {
            files: [{
                expand: true,
                cwd: ‘build‘,
                src: ‘**‘,
                dest: ‘www‘
            }]
        }
    },
    watch: //自动监听文件的保存并执行指定的任务
    {
        Task_001: //任务一
        {
            files: [‘src/js/*.js‘, ‘src/css/*.css‘, ‘src/app/*.html‘],
            tasks: [‘uglify‘, ‘cssmin‘, ‘htmlmin‘, ‘copy‘],
            options: {
                spawn: false,
                livereload: true
            }
        }
    }
});

//#####告诉grunt我们将使用的插件

grunt.loadNpmTasks(‘grunt-contrib-connect’); //本地服务器

grunt.loadNpmTasks(‘grunt-contrib-uglify‘); //js压缩

grunt.loadNpmTasks(‘grunt-contrib-cssmin‘); //css压缩

grunt.loadNpmTasks(‘grunt-contrib-imagemin‘); //image压缩

grunt.loadNpmTasks(‘grunt-contrib-htmlmin‘); //html压缩

grunt.loadNpmTasks(‘grunt-contrib-copy‘); //Copy文件和目录

grunt.loadNpmTasks(‘grunt-contrib-watch‘); //监视文件


//#####告诉grunt我们在终端输入grunt时需要做一些什么


grunt.registerTask(‘default‘, [‘clean‘, ‘uglify‘, ‘cssmin‘, ‘imagemin‘, ‘htmlmin‘, ‘copy‘, ‘watch‘]);

 
时间: 2024-12-15 01:42:57

Gruntfile.js的相关文章

grunt使用watch和livereload的Gruntfile.js的配置

周末在家看angularJS, 用grunt的livereload的自动刷新, 搞了大半天, 现在把配置贴出来, 免得以后忘记了, 只要按照配置一步步弄是没有问题的; 开始的准备的环境安装是: (1):nodeJS,去官方网站下载(href); (2):然后把nodeJS加到全局的环境变量里面去(nodeJS安装好了就能用npm这个命令了),参考(href); (3):执行npm install grunt -g 和 npm install -g grunt-cli,一个是安装服务端的gurnt

Gruntfile.js文件配置项

GRUNT安装与配置 Posted on 2016-08-19 18:13 听风吹来的种子 阅读(47) 评论(0) 编辑 收藏 安装 CLI npm install -g grunt-cli//全局安装 npm init //初始化package.json npm init   命令会创建一个基本的package.json文件. 1 2 3 npm install grunt --save-dev npm install grunt-contrib-jshint --save-dev ....

Gruntfile.js模板

module.exports = function(grunt) { // 配置项 var AppConfig = { name: 'app', //源文件目录 src: 'app/src', //生产文件目录 dist: 'app/assets' }; //加载所有的任务 require('load-grunt-tasks')(grunt); //显示每一个任务所花的时间和百分比 require('time-grunt')(grunt); grunt.initConfig({ config:

Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置

grunt.initConfig方法 用于模块配置,它接受一个对象作为参数.该对象的成员与使用的同名模块一一对应. 每个目标的具体设置,需要参考该模板的文档.就cssmin来讲,minify目标的参数具体含义如下: expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名. cwd:需要处理的文件(input)所在的目录. src:表示需要处理的文件.如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符. dest:表示处理后的文件名或所在目录. ext:

Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置(学习转载)

grunt.initConfig方法 用于模块配置,它接受一个对象作为参数.该对象的成员与使用的同名模块一一对应. 每个目标的具体设置,需要参考该模板的文档.就cssmin来讲,minify目标的参数具体含义如下: expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名. cwd:需要处理的文件(input)所在的目录. src:表示需要处理的文件.如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符. dest:表示处理后的文件名或所在目录. ext:

自动编译CoffeeScript的Gruntfile.js

比如把coffee文件写在coffee/controller/文件夹下,新建js/controller文件夹,使用grunt运行项目,将自动编译coffee到相应的js文件夹下. module.exports = function(grunt) { // 项目配置信息. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), jshint: { options : { jshintrc: '.jshintrc', // eqeqe

grunt 合并压缩js和css文件(二)

具体node及文件配置请看: grunt 安装使用(一) 要压缩的文件 --src/ ajax.js assets.js touch.js zepto.js 目录结构: dist/ node_modules/ src/ Gruntfile.js package.json package.json是依赖库文件 Gruntfile.js是执行步骤程序 一.js合并压缩 第一次需要先安装grunt.执行 npm install -g grunt-cli 进行安装.如果已经安装,可以忽略. 1.pack

初探grunt.js

package.js { "name": "ttd_v3", "version": "0.1.0", "author": "liujin", "devDependencies": { "connect-livereload": "^0.5.2", "grunt": "~0.4.2", &q

如何使用Grunt脚手架快速创建Node.js项目

作者:zhanhailiang 日期:2014-11-17 1. 安装node.js,npm工具(略). 2. 安装grunt, grunt-init npm install -g grunt-cli npm install -g grunt-init 3. 下载脚手架:grunt-init-node - Create a Node.js module, including Nodeunit unit tests. git clone git@github.com:billfeller/grun