gulp基本插件

gulp 是基于 nodejs 流 编写的插件

创建项目

进入项目

    npm init -y
    npm i gulp -g  （使用命令 gulp）
    npm i gulp -D   #npm i gulp@3.9.1 --save-dev     开发依赖（前端工具都是开发依赖  本地安装 代码加载模块）
    npm i axios -S   #npm i axios --save         项目依赖-线上项目依赖（线上的代码需要用到 比如 axios）
​
​
    #dev 开发环境   源代码 - 使用一个工具 gulp把代码进行压缩
    #test 测试环境
    #生产环境 线上   css，js，html 压缩   不需要使用gulp
    https://www.npmjs.com/package/gulp/v/3.9.1
​
​
   

项目根目录中创建 gulpfile.js

const gulp = require('gulp');
gulp.task('tname',function(){
    //任务代码
})
在终端中：gulp tname
​
gulp.task('tname',function(){
    //任务代码
    console.log('t1')
    console.log('t2')
    // 1-获取对应的文件
    gulp.src('src/js/*.js') //文件流
    // 2-管道里 做一个处理    压缩处理 安装插件
    // .pipe(调用一个插件)
​
    // 3-管道存放到另一个地方
    .pipe(gulp.dest('dist/js'))
​
})
​
​

安装编译压缩 scss 插件

npm install gulp-sass -D
npm install node-sass@4 -D
​
    npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
    
    npm install node-sass@4
    
 

var sass = require('gulp-sass');
​
sass.compiler = require('node-sass');
​
gulp.task('sass', function () {
     gulp.src('./src/scss/**/*.scss')
      .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
      .pipe(gulp.dest('src/css'))
      .pipe(gulp.dest('dist/css'));
});
​
​
// 监听任务
gulp.task('sass:watch', function () {
    // 监听 第一个参数 的文件， 一旦文件有变化，就执行第二个参数里的任务
   // gulp.watch('./src/scss/**/*.scss', ['sass']);
   //gulp-sass 文档使用 gulp@3  而现在安装的gulp@4
    gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));
});
​

安装压缩 js 插件

 npm i gulp-uglify -D

在文件中定义任务

var gulp = require("gulp");
var uglify = require("gulp-uglify");
gulp.task("js", function () {
  console.log("js任务代码");
  gulp.src("./src/js/*.js").pipe(uglify()).pipe(gulp.dest("./dist/js"));
});

在终端中输入 gulp js 执行任务

npm install --save-dev gulp-babel @babel/core @babel/preset-env

const babel = require('gulp-babel');
gulp.task('babel', () =>
    gulp.src('src/js/**/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('dist/js'))
);

// 压缩js
var uglify = require('gulp-uglify');
gulp.task('compress',function(){
    // 获取js文件
    gulp.src('./src/js/**/*.js')
    // 转译插件 高版本js 转出 es5
    .pipe(babel({
        presets: ['@babel/env']
    }))
    // es5代码 压缩
    .pipe(uglify())
    // 输出到 dist
    .pipe(gulp.dest('./dist/js'))
})

npm install gulp-concat -D

// 合并js

var concat = require('gulp-concat');

gulp.task('concat',function(){
    // 获取要合并的js文件
    gulp.src((['./src/js/a.js', './src/js/b.js']))
    // 转译
    .pipe(babel({
        presets: ['@babel/env']
    }))
    // 压缩
    .pipe(uglify())
    // 合并
    .pipe(concat('login.js'))
    // 输出
    .pipe(gulp.dest('./dist/js'))
    .pipe(gulp.dest('./src/js'))

})

npm install gulp-htmlmin -D

//gulp-htmlmin  压缩html
var htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin', function() {
   gulp.src('src/**/*.html')
//    压缩html代码 去掉了 空格和换行
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));
})

npm install gulp-connect -D

var connect = require("gulp-connect");

gulp.task("connect", function () {
  gulp.src("./src/**/*.html").pipe(connect.reload());
});
//
gulp.task("server", function () {
  //  启动服务器
  connect.server({
    livereload: true,
  });
  // 监听文件的变化，一旦文件有变化就执行 后面数组的任务
    gulp.watch("./src/js/**/*.js", gulp.series("connect"));
    gulp.watch("./src/css/*.css", gulp.series("connect"));
    gulp.watch("./src/scss/*.scss", gulp.series("sass"));
    gulp.watch("src/**/*.html", gulp.series("connect"));
});

npm i gulp-imagemin -D

执行 gulp 任务报错解决, 重装 nodejs 10 https://blog.csdn.net/zxxzxx23/article/details/103000393

const imagemin = require('gulp-imagemin');
gulp.task('imagemin', function () {
    gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
})

打包任务

gulp.task('build', gulp.series(['js', 'sass', 'minify']), function () {

  console.log('项目的构件压缩完毕！');

})