美文网首页
(自用)gulp-less+babel

(自用)gulp-less+babel

作者: E微客 | 来源:发表于2018-09-21 16:16 被阅读0次
    1. 首先执行npm init -y初始化,生成package.json文件
    2. 然后安装babel
      npm install --save-dev babel-cli
      npm install babel-preset-env --save-dev
    3. 创建.babelrc文件,内容如下:
    {
      "presets": ["env"]
    }
    
    1. package.json文件中的scripts下加入一行"build": "babel es6 -d js"
    2. 接下来下载gulp-less
      npm install gulp-less --save-dev
    3. 创建gulpfile.js文件,内容如下;
    var gulp = require('gulp'), //本地安装gulp所用到的地方
        less = require('gulp-less');//本地安装gulp-less所用到的地方
    
    //定义一个testLess任务(自定义任务名称)
    gulp.task('less', function () {
        gulp.src('./less/**/*.less') //该任务针对的文件,你需要编译的文件
            .pipe(less()) //该任务调用的模块
            .pipe(gulp.dest('./css')); //将会在css下生成index.css
    });
    
    gulp.task('watch', function(){
        gulp.watch("./src/**/*.less", ['less']);
    });
    //定义默认任务,通过命令行执行gulp命令若没提供任务名就按此处定义的任务来执行,可以是一次执行多个任务。
    gulp.task('default',['less']); 
    

    package.json文件完整如下:

    {
      "name": "0921",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "babel es6 -d js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-env": "^1.7.0"
      },
      "dependencies": {
        "gulp-less": "^4.0.1"
      }
    }
    
    

    调用:npm run buildgulp
    监听less变化,自动更新css文件:gulp watch

    相关文章

      网友评论

          本文标题:(自用)gulp-less+babel

          本文链接:https://www.haomeiwen.com/subject/gzxznftx.html