gulp的配置以及使用

Posted 2020-11-21 miaslady

1. 全局安装 gulp：npm install --global gulp
2.作为项目的开发依赖（devDependencies）安装：npm install --save-dev gulp
3.在项目根目录下创建一个名为 gulpfile.js 的文件:
var gulp = require(‘gulp‘);

gulp.task(‘default‘, function() {
// 将你的默认的任务代码放在这
});
4.运行 gulp：gulp
5.创建package.json:npm init

js: gulp+babel(es6==>es5)
1.将es6转化为es5:cnpm install --save-dev gulp-babel babel-preset-es2015
2.const gulp = require(‘gulp‘);
const babel = require(‘gulp-babel‘);

gulp.task(‘default‘, () => {
return gulp.src(‘es6/*.js‘)
.pipe(babel({
presets: [‘es2015‘]
}))
.pipe(gulp.dest(‘build‘));
});

css: gulp + less=>css + px=>rem + 加前缀 + 压缩css（兼容到ie8）
1.less=>css:npm install gulp-less
2.px=>rem:npm install --save-dev gulp-postcss postcss-px2rem
3.加前缀:cnpm install gulp-autoprefixer --save-dev
4.压缩css:npm install gulp-clean-css
5.var less = require(‘gulp-less‘);
var postcss = require(‘gulp-postcss‘);
var px2rem = require(‘postcss-px2rem‘);
var processors = [px2rem({remUnit: 75})];
var autoprefixer = require(‘gulp-autoprefixer‘);
var cssmin = require(‘gulp-clean-css‘);
6.
gulp.task(‘less‘, function () {
// before. 找到 less 文件
return gulp.src(‘./assets/styles/*.less‘)
/*1.把less转为css*/
.pipe(less())
// 2. 编译为px==>rem
.pipe(postcss(processors))
//3.加前缀
.pipe(autoprefixer({
browsers:["ios >= 8","android > 4.4"],
cascade: true, //是否美化属性值 默认：true 像这样：
remove:true //是否去掉不必要的前缀 默认：true
}))
//兼容到ie8（压缩css）
.pipe(cssmin({
compatibility: ‘ie8‘,
keepSpecialComments: ‘*‘
//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
}))
// 3. 另存文件
.pipe(gulp.dest(‘./assets/css‘))
});

转换less和js：
gulp.task(‘default‘, [‘less‘, ‘js‘])

监听less和js并进行转换：
gulp.task(‘watch‘,function(){
gulp.watch(‘./assets/styles/*.less‘,[‘less‘]);
gulp.watch(‘./assets/lib/*.js‘,[‘js‘]);
})