gulp环境构建--

Check for node, npm, and npx

这了node的版本要求最低8.x以上版本

node --version
npm --version
npx --version

 

全局安装gulp-cil命令行

npm install --global gulp-cli

 

创建项目初始化gulp

mkdir gulpDemo   // 创建目录
cd gulpDemo      // 进入目录
npm init         // 初始化

 

gulp为项目依赖，所谓项目依赖就是当前项目目录下需要单独安装

npm install --save-dev gulp

 

在项目的根目录下，创建一个名字为gulpfile.js的文件,添加一个默认任务

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

 

运行gulp

gulp

 

创建gulp任务

gulp最常见的任务就是压缩、合并、重命名等任务

接下来我们一次来看一些这些任务如何创建

压缩CSS文件

1. 安装依赖

npm install --save gulp-minify-css

 

1. 创建任务

const gulp = require("gulp")
const minifyCSS = require("gulp-minify-css")

function minCSS(cb){
    gulp.src("./src/css/*.css")
    .pipe(minifyCSS())
    .pipe(gulp.dest("./dist/css"))
    cb()
}

gulp.task("default",minCSS);

 

以上代码完成了css压缩，并创建dist/css目录放置压缩后的css文件

压缩JS文件

1. 安装依赖

npm install --save gulp-uglify

 

1. 创建任务

const gulp = require("gulp")
const uglify = require('gulp-uglify')

function minJS(cb){
    gulp.src("./src/js/*.js")
    .pipe(uglify())
    .pipe(gulp.dest("./dist/js"))
    cb();
}

gulp.task("default",minJS);

 

合并任务(series)

将任务函数和/或组合操作组合成更大的操作，这些操作将按顺序依次执行。对于使用 series()组合操作的嵌套深度没有强制限制。

接下来我们合并一些列的操作包含：压缩、合并、重命名

 

1. 安装依赖

npm install --save gulp-rename
npm install --save gulp-concat

 

1. 创建任务

const gulp = require("gulp")
const { series } = require('gulp');
const uglify = require('gulp-uglify')
const minifyCSS = require("gulp-minify-css")
const rename = require("gulp-rename")
const concat = require("gulp-concat")

function minJS(cb){
    gulp.src("./src/js/*.js")
    .pipe(uglify())
    .pipe(gulp.dest("./dist/js"))
    cb();
}

function minCSS(cb){
    gulp.src("./src/css/*.css")
    .pipe(minifyCSS())
    .pipe(gulp.dest("./dist/css"))
    cb()
}

async function finalFile(){
    await gulp.src('./src/js/*.js')  //选择合并的JS
    .pipe(concat("app.js"))   //合并js
    .pipe(gulp.dest('./dist/js'))         //输出
    .pipe(rename({suffix:'.min'}))     //重命名
    .pipe(uglify())                    //压缩
    .pipe(gulp.dest('./dist/js')) 
}

gulp.task('default', series(minJS,minCSS,finalFile));