运用grunt及时编译less文件

下图是项目的文件构造

• 天生package.json文件，经由过程npm init敕令。

• 装置你须要的Devdependencies/denpendencies。

  • npm install grunt –save-dev

  • npm install load-grunt-tasks –save-dev

  • npm install time-grunt –save-dev

  • npm install grunt-contrib-watch –save-dev

  • npm install grunt-contrib-less –save-dev

  • npm install grunt –save

GruntFile.js设置

    'use strict';
    
    module.exports = function(grunt){
        require('time-grunt')(grunt);
        require('load-grunt-tasks')(grunt);
        
        grunt.initConfig({
            less: {
                build: {
                    expand: true,
                    cwd: 'less/',
                    src: '['*.less']',
                    dist: 'css/',
                    ext: '.css'
                }
            },
            
            watch: {
                files: ['less/**/*.less'],
                tasks: ['default']
            }
        });
        
        grunt.registerTask('default', ['less']);
    }

• grunt.initConfig()内里传入对象

• 每个字段名代表一个task

• task内里的内容为target目的

• 在less这个task内里：

  • expand: true 最先动态编译

  • cwd: 'less/' 一切的’src’里指定文件都是相对于这个属性指定的途径

  • src: ['*.less'] 相对与cwd途径下须要婚配的文件，这个处所是婚配一切的less文件

  • dest: 'css/' 天生目的文件的途径

  • ext: '.css' 替代一切天生的目的文件的后缀为这个属性

• 在watch这个task内里：

  • files:['less/**/*.less'] 示意监听less文件夹下，一切less文件，以及一切目录下的less文件

  • tasks: ['default'] 示意当上面被监听的文件发生变化的时刻会实行这个使命

• grunt.registerTask('default', ['less']) //注册’default’，内里包括’less’使命

在html文件内里引入less文件

<link href='less/index.less'/>
<script src='node_modules/less/less.js'></script>

启动grunt使命

翻开敕令行窗口，输入 grunt watch

这条敕令就示意启动grunt的task(watch),由于在task(watch)内里设置了tasks，即示意当监听的文件发生变化的时刻会实行default使命

这时刻你在index.less文件内里做出的修正敕令行都出及时编译为css，宁神革新浏览器就好了

运用编辑器自带的编译功用

webstorm有自带的less/sass编译功用，也能够举行响应的设置举行less文件的及时编译