Less. Авто-компиляция файла less в css, ubuntu 16.04

-- Установите node.js -- создайте папку в вашем проекте tools, перейдите в новую папку. -- введите npm install gulp (в консоле, находясь в нужной папке)

вы получите файл package.json

куда пропишите примерно следующее:

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.0.8",
    "gulp-concat": "^2.6.0",
    "gulp-cssnano": "^2.1.2",
    "gulp-less": "^3.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.1",
    "gulp-uglify": "^1.5.3",
    "gulp-uglifyjs": "^0.6.2",
    "less-plugin-autoprefix": "^1.5.1",
    "pump": "^1.0.1"
  },
  "dependencies": {
    "pageres": "^4.3.0"
  }
}

создайте файл gulpfile.js

туда поместите примерно следующее:

var gulp = require('gulp');
var minifyCss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var cleanCSS = require("gulp-clean-css");
var less = require("gulp-less");
var LessAutoprefix = require("less-plugin-autoprefix");
var path = require('path');
var plumber = require('gulp-plumber');
var uglify = require('gulp-uglify');
var pump = require('pump');
var autoprefix = new LessAutoprefix({
    browsers: ["last 2 versions"]
});
var path_src = "../где лежат исходники/";
var path_pub = "../../куда помещать готовое/";
var ps = {
    less: [path_src + "путь к лесс файлам/src/**/*.less"],
    less_main: [path_src + "путь к лесс файлам/src/less/main.less"],
    less_out: path_pub + "css/папка с готовыми css",
    less_second_all: [path_src + "custom/**/*.less"],
    //less_second:      [path_src+"custom/main.less"],
    less_second_out: path_pub + "css/custom",
    resetCSS_in: [
        path_src + "reset_css/reset.css",
        path_src + "reset_css/normalize.css"
    ],
    resetCSS_out: path_pub + "css/reset",
    scripts: [path_src + "js/**/*.js"],
    scripts_out: path_pub + "js"
};

gulp.task("minResetCss", function() {
    return gulp.src(ps.resetCSS_in)
        .pipe(concat("reset.css"))
        .pipe(cleanCSS())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest(ps.resetCSS_out));
});
gulp.task("mainCssProcessor", function() {
    return gulp.src(ps.less_main)
        .pipe(plumber())
        .pipe(less({
            plugins: [autoprefix]
        }))
        .pipe(concat("main.css"))
        .pipe(cleanCSS({
            advanced: false
        }))
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(plumber.stop())
        .pipe(gulp.dest(ps.less_out));
});
gulp.task("secondCssProcessor", function() {
    return gulp.src(ps.less_second_all)
        .pipe(plumber())
        .pipe(less({
            plugins: [autoprefix]
        }))
        // .pipe(concat("custom.css"))
        .pipe(cleanCSS({
            advanced: false
        }))
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(plumber.stop())
        .pipe(gulp.dest(ps.less_second_out));
});
gulp.task("mainScriptProcessor", function(cb) {
    pump([
            gulp.src(ps.scripts),
            // uglify(),
            gulp.dest(ps.scripts_out)
        ],
        cb
    );
});
gulp.task("watcher", function() {
    console.log("====================");
    gulp.watch(ps.less, ["mainCssProcessor"]);
    gulp.watch(ps.less_second_all, ["secondCssProcessor"]);
    gulp.watch(ps.scripts, ["mainScriptProcessor"]);
});
gulp.task("default", ["watcher",
    "minResetCss",
    "mainCssProcessor",
    "secondCssProcessor",
    "mainScriptProcessor"
]);

введите в консоли npm install

после установки, введите gulp в консоле, после чего будут автоматически собираться лесс файлы в css.

В примере используются дополнительные тулзы для минификации и ренейма файлов. + плюс есть таск перекладывающий и могущий минифицировать js файлы. Настройте пути, чутка прочитайте про gulp, и я думаю у вас все получится.

теперь gulp следит за лесс файлами и если вы внесли изменения -- все будет перекомпилироваться автоматом. в случае с больши лесс файлами, на компиляцию может уходить более 5 секунд(css более полумегабайта), учитываете это, иногда вводит в замешательство. В некоторых случаях имеет смыл перезапустить gulp.

Если на этапе установки не вышло установить пакеты. -- удалите файл package.json -- и попробуйте ввести отдельно команды npm install имя_пакета, npm сам создаст этот файл и сам туда все запишет. по поводу npm -- я там далеко не мастер, просто использую эту схему из проекта в проект, и некоторые детали забыл.

Есть два различных подхода.

1. Воспользуйтесь скриптом less-watcher, просто запуститив его в фоновой консольке.
2. Либо подключите в HTML скрипт less.js в режиме наблюдения.

<link rel="stylesheet/less" type="text/css" href="ваши_стили.less" />
<script>less = { env: 'development'};</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<script>less.watch();</script>

Оба способа не зависят от редактора.