zoukankan      html  css  js  c++  java
  • Less 编译生成 css

    开发模式下使用less.js
    <link rel="stylesheet/less" type="text/css" href="~/Content/less.less" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
    服务器端 运行时使用less.js
    sudo apt-get install nodejs-legacy nodejs
    sudo apt-get install npm
    sudo apt-get install node-less
    lessc test.less test.css
    npm install -g grunt-cli
    生成 package.json 文件
    这个 package.json 文件其实是 Node.js 来描述一个项目的文件,JSON 格式。生成这个文件超级简单,推荐用命令行交互式的生成一下:
    打开命令行,cd gruntxx 文件夹下面,输入指令 npm init 之后,就出来很多信息,然后开始填写项目名称,填写好了之后回车即可。其实这里你一路回车下去也无妨,但是建议你细细的填一下,不明白的跳过好了
    {
      "name": "'pansq'",
      "version": "1.0.1",
      "description": "learn grunt",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "grunt": "^1.0.1"
      }
    }
    
    安装 Grunt 和所需要的插件
    npm install grunt --save-dev
    cssmin:grunt-contrib-cssmin
    less:grunt-contrib-less
    合并文件:grunt-contrib-concat
    语法检查:grunt-contrib-jshint
    Scss 编译:grunt-contrib-sass
    压缩文件:grunt-contrib-uglify
    监听文件变动:grunt-contrib-watch
    建立本地服务器:grunt-contrib-connect
    
    module.exports = function(grunt){
        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
            less:{
                less2css : {
                    options: {
                        compress: false
                    },
                    files: {
                        '../css/global.css': '../less/global.less'
                    }
                }
            },
            cssmin:{
                target:{
                    options:{
                        sourceMap:false,
                        beautify: {
                            //中文ascii化,非常有用!防止中文乱码的神配置
                            ascii_only: true
                        }
                    },
                    files:{
                        '../css/global.min.css':'../css/global.css'
                    }
                }
            },
            uglify:{
                build:{
                    options:{
                        banner:'
    '
                    },
                    files:{
                        '../js/test.min.js':'../js/test.js'
                    }
                }
            }
        })
        grunt.loadNpmTasks('grunt-contrib-less');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.registerTask('default',['less','cssmin','uglify']);
    }
    

      

  • 相关阅读:
    清理iOS工程里无用的图片,可瘦身ipa
    NSTimer内存泄漏导致控制器不调用dealloc
    iOS面试题 -总结 ,你的基础扎实吗?
    Xcode找不到模拟器出现"My Mac"
    前端开发
    并发编程&数据库
    数据库
    4.2
    4.5
    4.4
  • 原文地址:https://www.cnblogs.com/mypsq/p/8022125.html
Copyright © 2011-2022 走看看