grunt

npm install -g grunt-cli //全局安装grunt npm init -y //初始化package.json npm install grunt --save-dev //在项目中安装grunt grunt --help //查看更多信息 grunt 安装完毕

新建Gruntfile.js 随便举得例子1:

module.exports= function (grunt) {
    grunt.registerTask('default', function () {
        console.log('aaaaaaaa');
        //grunt.log.writeln('aaaaaaaa');
        //函数中可以传递参数
    })
};

随便举的例子2: 执行多任务

module.exports= function (grunt) {
    grunt.registerTask('a', function (name) {
        grunt.log.writeln('hello'+name);
    });
    grunt.registerTask('b', function () {
        grunt.log.writeln('hello2')
    });
    grunt.registerTask('c', function () {
        grunt.log.writeln('hello3')
    });
    grunt.registerTask('default',['a','b','c']);
};

我们可以初始化一些数据,这些数据可以用到不同的任务里面

module.exports= function (grunt) {
    grunt.initConfig({
        a:{
            english:'hello'
        }
    });
    grunt.registerTask('a', function (name) {
        grunt.log.writeln(grunt.config.get('a.english'));
    });
};

多个任务执行

module.exports= function (grunt) {
    grunt.initConfig({
        a:{
            english:'hello',
            spanlish:'hello2'
        }
    });
    grunt.registerMultiTask('a', function (name) {
        grunt.log.writeln(this.target+':'+this.data);
    });
};

以下是插件的一部分功能 复制文件 npm install grunt-contrib-copy --save-dev

grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.initConfig({
        copy:{
            html:{
                src:'index.html',
                dest:'dist/'
            }
        }
    });

监听文件 npm install grunt-contrib-watch --save-dev

grunt.loadNpmTasks('grunt-contrib-watch');
        watch:{
            html:{
                files:['index.html'],
                tasks:['copy:html']
            }
        }

放到服务器上 npm install grunt-contrib-connect --save-dev

 connect:{
            server:{
               port:8080,
               base:'dist/'
            }
 }

grunt connect:server:keepalive一直保持状态

自动刷新浏览器 npm install grunt-contrib-livereload --save-dev 在connect中添加:livereload:true 在watch中添加:livereload:true

编译sass npm install grunt-contrib-sass --save-dev

        sass:{
            mysass:{
                src:'css/a.scss',
                dest:'dist/scss/a.css'
            }
        }

编译less npm install grunt-contrib-less --save-dev

        less:{
            myless:{
                src:'css/b.less',
                dest:'dist/less/b.css'
            }
        }
npm install grunt-contrib-concat --save-dev //安装合并插件
npm install grunt-contrib-uglify --save-dev //安装js压缩插件

js压缩合并

        concat:{
            myconcat:{
                src:'js/*.js',
                dest:'dist/hebing/a.hebing.js'
            }
        },
        uglify:{
            myuglify:{
                src:'dist/hebing/a.hebing.js',
                dest:'dist/yasuohebing/b.min.js'
            }
        }
npm install grunt-contrib-cssmin --save-dev//安装css压缩
npm install grunt-contrib-htmlmin --save-dev//安装html压缩
htmlmin:{
            options:{
                removeComments: true,
                removeCommentsFromCDATA: true,
                collapseWhitespace: true,
                collapseBooleanAttributes: true,
                removeAttributeQuotes: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeOptionalTags: true
            },
            myminhtml:{
                src:'index.html',
                dest:'dist/html/'
            }
        }
npm install grunt-contrib-imagemin --save-dev//优化img  
imagemin:{
            myimage:{
                expand:true,
                src:'img/*',
                dest:'dist/'
            }
        }
文件头部加一段注释性语言配置banner信息
 options: {      banner: '/*! 注释信息 */'    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏沈唁志

简单配置.htaccess就可以实现的几个功能

3284
来自专栏Android群英传

创建后台任务的两种代码模式

911
来自专栏流柯技术学院

jmeter connection reset解决方法

1.修改HTTP请求下面的Impementation选项,改成HttpClient4

5252
来自专栏王小雷

pgAdmin4 ubuntu python 安装

ubuntu安装pgAdmin4,通过python的pip 安装 pgAdmin4.(首更时间20161205) 新版本的pgAdmin4目前支持mac/w...

3787
来自专栏小狼的世界

Apache服务器访问过慢分析及解决

起因:线上的一台服务器,最近总是出现 访问 很慢的情况发生,点击一个链接要2秒钟以上才能打开,按照我们对于访问人数的估计,服务器应该不至于响应这么慢,从而需要针...

3462
来自专栏Java编程技术

Dubbo剖析-服务提供方Invoker到Exporter的转换

前面dubbo整体架构分析里面我们讲解了服务提供者暴露一个服务的详细过程是,首先具体服务的实现类转换为了Invoker对象,然后Invoker在转换为Expor...

1313
来自专栏Java编程技术

Dubbo剖析-服务消费方Invoker到客户端接口的转换

前面dubbo整体架构分析里面我们讲解了服务消费者消费一个服务的详细过程是,首先 调用 Protocol 的 refer 方法生成 Invoker 实例,接下来...

1123
来自专栏meteorzx

Grunt配置及使用

1、node环境安装 http://www.runoob.com/nodejs/nodejs-install-setup.html 2、grunt安装 pack...

5556
来自专栏吾爱乐享

软件测试之Jmeter环境搭建及安装

1554
来自专栏以南小隐-数通那些事儿

EVE-NG-PRO导入Dynamips镜像《EVE-NG系列教程二》

2.7K4

扫码关注云+社区

领取腾讯云代金券