以前的老项目了,写几篇gulp3的文章,后面再折腾一下gulp4

前提条件:

  1. 安装了node
  2. 安装了git
  3. 安装了gulp3 # 具体操作:

1. 打开git bash 安装gulp-less、 gulp-clean-css、 gulp-autoprefixer

$ npm install gulp-less gulp-clean-css gulp-autoprefixer --save-dev

gulp-less:实现less代码转换成css gulp-autoprefixer:实现css3代码自动添加浏览器前缀 gulp-clean-css:实现css代码压缩

2.在根目录创建gulpfile.js

3.gulpfile内引入文件

var gulp = require('gulp')
var less = require("gulp-less")             // less装换成css
var cleanCss = require("gulp-clean-css")    // 压缩css文件
var autoprefixer = require("gulp-autoprefixer") // 添加css3浏览器前缀 

4.添加task任务

var folder = {
    'src':'src/',
    'dist':'dist/'
}
gulp.task("css",function(){
    gulp.src(folder.src + "css/*")      // 读取src/css文件夹下面的所有文件
    .pipe(less())                       // 将less转译成css
    .pipe(autoprefixer({                // 自动给css添加浏览器前缀
        browsers: ['last 20 versions'] 
    }))
    .pipe(cleanCss())                   // css代码压缩
    .pipe(gulp.dest(folder.dist+"css/"))  // 输出代码到dist/css目录下面
})

5.加入启动队列


gulp.task("default", ["css"])

6.启动gulp,完成

$gulp