• 初始Gulp


      Gulp:

    1、开源的js自动化工具 2、用于前后端代码管理的一种工具 3、基于node和npm应用的构建工具 4、主要处理耗时及重复的任务 5、可以解决上百种的任务 
    1、压缩代码  2、合并代码 3、压缩图片 4、Sass转换

      原理:

    1、基于NodeJs中的数据流 2、主要使用pipe事件输入输出 3、插件独立使用

      优势:

    1、基于代码进行配置 2、可读性更高 3、基于数据流哦,所以可以操作pipe()事件

    实例如下几种:

    1、拷贝文件 2、压缩图片 3、压缩JS代码 4、Sass转换 5、执行多任务 6、代码合并 7、监听文件
    //  处理任务
    var gulp = require("gulp")
    var imagemin = require("gulp-imagemin")
    var uglify = require("gulp-uglify")
    var sass = require("gulp-sass")
    var concat = require("gulp-concat")
    
    /**
     * 常用方法
     * gulp.task --- 定义任务
     * gulp.src   --- 找到需要执行任务的文件
     * gulp.dest  --- 执行任务的文件的去处
     * gulp.watch --- 观察文件内是否发生变化
     */
    
    // 定义任务
    gulp.task("message", function() {
      return console.log('gulp is running');
    })
    
    // // 执行任务 gulp + 任务名称(message)
    // //定义默认任务
    // gulp.task("default", function() {
    //   return console.log('这是默认的任务,只需要执行gulp即可');
    // })
    
    // 拷贝文件
    gulp.task("copyHtml", function() {
      gulp.src('./src/*.html')
          .pipe(gulp.dest("dist"))
    })
    
    /**
     * 图片压缩
     * 安装插件 cnpm install --save-dev gulp-imagemin
     */
    gulp.task("imageMin", function() {
      gulp.src("./src/images/gulp1.jpg")
          .pipe(imagemin())
          .pipe(gulp.dest("dist/images"))
    })
    
    // 压缩js文件
    // gulp.task("minify", function() {
    //   gulp.src("./src/js/*.js")
    //       .pipe(uglify())
    //       .pipe(gulp.dest("dist/js"))
    // })
    
    // sass 转换为css
    gulp.task("sass", function() {
      gulp.src('./src/sass/style.scss')
          .pipe(sass().on('error', sass.logError))
          .pipe(gulp.dest("dist/css"))
    })
    
    // 代码合并
    gulp.task("script", function() {
      gulp.src("src/js/*.js")
          .pipe(concat("main.js"))
          .pipe(uglify())
          .pipe(gulp.dest("dist/js"))
    })
    
    // 监听文件是否发生变化
    gulp.task("watch", function() {
      gulp.watch("src/js/*.js", gulp.series("script"))
      gulp.watch("src/images/*", gulp.series("imageMin"))
      gulp.watch("src/sass/*.scss", gulp.series("sass"))
      gulp.watch("src/*.html", gulp.series("copyHtml"))
    })
    
    // 如何执行多个任务
    // 执行任务 gulp + 任务名称(message)
    //定义默认任务
    // gulp.task("default", ['message', 'copyHtml', 'imageMin', 'minify', 'sass']) // gulp 3
    gulp.task('default',gulp.parallel('message', 'copyHtml', 'imageMin', 'sass', 'script', () => {
      // Do something after a,b, and c are finished.
      console.log('执行了。。。')
    }))
  • 相关阅读:
    DM逻辑结构
    DM常见问题
    DM进程与线程
    DM物理存储结构
    systemdlogind.service的RemoveIPC参数影响
    DM内存结构
    DMSQL记录日志跟踪功能
    ACM中java的使用
    Java读取CSV文件为List
    Vue打包优化 优化JS过大 西门
  • 原文地址:https://www.cnblogs.com/slightFly/p/13682213.html
Copyright © 2020-2023  润新知