less与gulp

Less

  • 安装lessc

    apt-get install npm
    npm install -g less

    这时执行lessc将会报异常:

    /usr/bin/env: node: No such file or directory

    这是因为在环境变量中找不到node,其实现在已经是nodejs了,可以修改/usr/local/bin/lessc 中的

    #!/usr/bin/env node

    #!/usr/bin/env nodejs
  • 接下来就可以编译less了,如

    lessc test.less -x>test.css

gulp

  • 安装npm

    apt-get install npm
  • 全局安装gulp

    npm install gulp -g
  • 使用npm init生成或编写/pakage.json,目的是使用npm来安装插件

    {
    "name": "mytest",
    "version": "0.0.1",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-less": "^1.0.0"
    }
    }

    其中gulp是本地安装,全局安装是为了使用gulp命令,本地安装是为了使用gulp插件。

  • 使用npm安装依赖插件

    npm install
  • 使用gulpfile.js定制任务

    var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');

    //定义一个testLess任务(自定义任务名称)
    gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
    .pipe(less()) //该任务调用的模块
    .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
    });

    gulp.task('default',['testLess']); //定义默认任务
  • 执行任务

    gulp testLess

    gulp default

    gulp
  • gulp常用插件可以从这里查找。

翟前锋 wechat
欢迎订阅我的微信公众号:zhaiqianfeng!