Grunt自动化工具相关

时间:2022-10-14 06:25:27

Grunt 项目中安装grunt模块npm install grunt --save,删除模块 npm uninstall grunt ,缺失某个插件:npm install grunt-contrib-插件名

Grunt自动化工具-qunit单元测试

安装时,npm install grunt-contrib-qunit --save-dev报错

Grunt自动化工具相关

解决方法:

下载phantomjs-2.1.1-windows.zip 放到C:\Users\Administrator\AppData\Local\Temp\phantomjs目录下,

之后便可顺利安装qunit

npm 下载 less插件 npm install grunt-contrib-less --save-dev,

Gruntfile.js:

module.exports = function (grunt) {
    grunt.initConfig({
        less:{
            development:{
                files:{
                    'dist/_less.css':'less/css.less'  //将less/css.less 转化为_less.css
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.registerTask('default', ['less']);

};
Node.js command prompt项目路径执行 grunt less

Grunt自动化工具相关


2017.10.13今天看到Autoprefixer的相关介绍:一个以最好方式处理浏览器前缀的后处理程序。可解析CSS文件并且添加浏览器前缀到CSS规则里。例如 你只要写.itemList{display:flex;} 执行后它会自动帮你变为 .itemList{display: -webkit-box;display:-ms-flexbox;display:flex;}于是学习并进行操作,学习参考来自 http://www.cnblogs.com/aNd1coder/p/autoprefixer.html安装autoprefixer npm install grunt-autoprefixer 注意:并非grunt-contrib-autoprefixer
项目目录:
Grunt自动化工具相关
Grunt自动化工具相关

使用grunt的watch监控css的变化,css发生变化了则执行autoprefixer任务

Grunt自动化工具相关