• 初始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('执行了。。。')
    }))
  • 相关阅读:
    iOS -Swift 3.0 -for(循环语句用法)
    C++ 中的std::vector介绍(转)
    C++ 中的sort排序用法
    iOS获取当前AppStore版本号与更新
    cocos2dx 3.x(获得父类的node型指针调用父类函数this->getParent())
    cocos2dx 3.x(TexturePacker进行图片加密)
    cocos2dx 3.x(屏幕截图的两种方法)
    cocos2dx 3.x(在Mac平台下利用Eclipse打包安卓apk安装包详细教程)
    cocos2dx 3.x(定时器或延时动作自动调用button的点击响应事件)实现自动内测
    cocos2dx 3.x(移动修改精灵坐标MoveTo与MoveBy)
  • 原文地址:https://www.cnblogs.com/slightFly/p/13682213.html
Copyright © 2020-2023  润新知