LESS-Middleware: Perfect Combination of Node. js and LESS

LESS is a good way to write CSS. It allows you to use variables, nested rules, and many other useful functions. It helps you better organize your CSS code.

Recently I have been studying Node. js and want to use Less-middlewareMiddleware, so that I can easily use it in my applications LESS. After configuration, LESS-Middleware can automatically compile your LESS code as CSS code.

Var lessMiddleware = require ("less-middleware"); app. use (lessMiddleware ({src: _ dirname + "/less", dest: _ dirname + "/public/css", prefix: "/css", force: true}); app. use (express. static (_ dirname + "/public "));

In this example, I configure the source directory as the "/less" directory under the root directory of my application and output CSS to the "/public/css directory. In addition, you need to specify the "prefix" attribute to match the directory following "/public", that is, the "/css" directory.

You can also specify other parameters, with the force parameter specified above, so that the LESS file can be re-compiled every time a request is made, and then combined with the automatic refresh function, in this way, you can modify the style code during development to achieve immediate effect.

Finally, reference the CSS file on the page is the same as normal:

<link rel="stylesheet", type="text/css", href="css/styles.css">

Upgrade and migration

When this article was published, less-middleware was updated to version 1.0.3. The above configuration is for version 0.1.x. The following describes how to migrate from 0.1.x to 1.0.x.

First, it is also an important change --Changes in source directory Parameters, Which was previously placed in the options parameter, as follows:

lessMiddleware({  src: path.join(__dirname, '/public')})

Because the source directory is a required parameter, the upgrade is the first parameter of the middleware, as follows:

lessMiddleware(path.join(__dirname, '/public'))

The second change isMiddleware parameter and LESS parameter SeparationIn this way, the parameter structure is clearer as follows:

lessMiddleware(source, [{options}], [{parserOptions}], [{compilerOptions}])

The options parameter is provided to the middleware, while the following two parameter objects do not affect the middleware and are passed to the LESS parsing and compiler.

After this adjustment, the corresponding parameter definition method must be adjusted accordingly. The following are some corresponding modifications:

• compress: SlaveOptions remove,You mustCompilerOptions;
• dumpLineNumbers: SlaveRemove options. Defined in parserOptions;
• optimization: SlaveOptions remove,Need Defined in parserOptions;
• paths: SlaveOptions remove,Need Defined in parserOptions;
• preprocessor: Already movedPreprocessor. less;
• relativeUrls: SlaveOptions remove,Need Defined in parserOptions;
• sourceMap: SlaveOptions remove,You mustCompilerOptions;
• yuicompress: SlaveOptions remove,You mustCompilerOptions;

The third change isNew Parameter added,Prefix and treeFunctions parameters are also removed.Allows you to configure more flexibly, as shown below:

• postprocess.css: Modify the CSS compilation output before being saved;
• preprocess.less: Modify the LESS file before it is parsed and compiled;
• preprocess.path: Modify the LESS path before being loaded by the file system;

With these parameters, the features we previously implemented using prefix can achieve the same effect in the following ways:

preprocess: {  path: function(pathname, req) {    return pathname.replace(/^\/less\//, '/css');  }}

For more information, see the official less-middleware documentation.

 

Articles you may be interested in

• Unlimited creativity! A set of webpage sidebar transition animations [download with source code]
• It's really good! 13 very dynamic page loading animation Effects
• Have you ever seen it? 9 superb check box Effects
• Awesome! Bootstrap-based responsive background management template
• Awesome! Amazing page switching animation effects [Download source code]

 

Link to this article: LESS-Middleware: Perfect Combination of Node. js and LESS

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

Source of this article [http://www.cnblogs.com/lhb25 /]