新建文件目录
src: 源代码
dist: gulp解析后的代码
package.json: 需要的模块，内容如下
{
"homepage": "https://github.com/nimojs/gulp-book",
"version": "0.0.1",
"description": "",
"main": "gulpfile.js",
"license": "MIT",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-cssnano": "^2.1.2",
"gulp-less": "^3.0.2",
"gulp-rename": "^1.2.2"
}
}
gulpfile.js: gulp配置文件
//gulpfile.js
const gulp = require('gulp');
const less = require('gulp-less');
const cssnano = require('gulp-cssnano');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');
gulp.task('less', function () {
gulp.src('./src/**/*.less')
.pipe(less())
// .pipe(cssnano())
.pipe(rename(function(path){
path.extname = '.wxss';
}))
.pipe(gulp.dest('./dist'))
});
gulp.task('pages', function() {
return gulp.src([
'!src/**/*.less',
'src/**'
]).pipe(gulp.dest('./dist'))
})
gulp.task('auto', function () {
gulp.watch(['src/**/*.less'], ['less']);
gulp.watch([
'!src/**/*.less',
'src/**'
], ['pages']);
})
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 less 任务和 auto 任务
// gulp.task('default', ['less', 'pages', 'auto'])
gulp.task('default', ['less', 'pages', 'auto']);
运行gulp命令
