美文网首页
(自用)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