- 首先执行
npm init -y
初始化,生成package.json
文件 - 然后安装
babel
:
npm install --save-dev babel-cli
npm install babel-preset-env --save-dev
- 创建
.babelrc
文件,内容如下:
{
"presets": ["env"]
}
- 在
package.json
文件中的scripts
下加入一行"build": "babel es6 -d js"
- 接下来下载
gulp-less
:
npm install gulp-less --save-dev
- 创建
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 build
、gulp
监听less变化,自动更新css文件:gulp watch
网友评论