gulp学习记录

Posted yangc6925

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp学习记录相关的知识,希望对你有一定的参考价值。

gulp是基于node的自动化构建工具


gulp能干啥?1.压缩JS、css文件2.合并文件3.自动编译SASS4.自动压缩图片5.保存时自动刷新浏览器


npm init ---->初始化一个gulp环境,创建一个package.json文件
  --save:将信息保存在package.json中
  --dev:将信息保存在package.json的devDependencies节点中


用gulp当然要给它位置啦!gulpfile.js是gulp项目的配置文件,是位于根目录的普通JS文件
一般是gulpfile pakage node_modules三个文件放在一起。


添加部署文件:

  1、输入源
  输入源(操作的文件路径) gulp.src(文件路径)

  src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用插件

  文件路径设置:
  a、单个文件夹:"src/js/index.js";

  b、匹配所有文件:"*" 例:src/*.js --->src下面所有的js文件

  c、匹配0个或多个子文件夹:"**" 例如:scr/**/*.js--->src下面的0个或者多个子文件夹的js文件

  d、匹配多个属性: 例如:src/a,b.js--->src下面的a.js和b.js src/*.jpg,png,gif--->src下面所有的jpg png gif文件

  e、排除文件:! 例如: !scr.a.js--->排除src下面的a.js文件



  2、通过管道进行输入
   管道:pipe()


  3、输出源:参数是将文件输出到哪
   dest()


  栗子:
  拷贝:gulp.src("src/**/*").pipe(gulp.dest("dist/js"))


  合并:gulp.task("addDate",function()
      gulp.src(["src/json/**/*","src/xml/**/*"])
      .pipe(gulp.dest("dist/data"))
    )

 

  gulp高级:--->当然需要加载插件!!!!!


1.图片压缩---安装插件cnpm install gulp-imagemin --save-dev
  var imgmin = require("gulp-imagemin");--->引入图片压缩的模块
    gulp.task("imgmin",function()
    //将所有的图片进行压缩
    gulp.src("src/imgs/**/*")
    //通过管道先压缩,然后再通过管道输出到dist文件夹下
    .pipe(imgmin())
    .pipe(gulp.dest("dist/imgs"))
  )


2.Js压缩---命令行安装 cnpm install gulp-uglify --save-dev
  var jsMin = require("gulp-uglify");--->引入Js压缩的模块
  gulp.task("Jsmin",function()
  //将所有的JS进行压缩
  gulp.src("src/js/js*.js")
  //通过管道先压缩,然后再通过管道输出到dist文件夹下
  .pipe(jsMin())
  .pipe(gulp.dest("dist/js/js"))
  )


3.编译sass及压缩css ---->cnpm install gulp-sass-china --save-dev
  var css = require("gulp-sass-china")//引入sass编译的模块
  //开启任务
  gulp.task("cssmin",function()
  //将scss下面的所有scss sass文件 进行编译
  gulp.src("scss/**/*.scss,sass")
  //通过管道进行编译,然后再通过管道输出待src/css文件夹下,
  //如果要进行压缩的话就在css里面传递参数 compressed为紧凑格式
  .pipe(css(
  outputStyle:"compressed"
  ))
  .pipe(gulp.dest("src/css"))
  )


4.监听
  虽然以上可以将sass编译和压缩 但是如果在sass里面编写文件 css里面的文件不会改变的!而需要每次都去终端中运行。特别麻烦。首先监听不能够单独存在 必须配合任务一起使用!
  /*
  监听:gulp.watch()
  参数两个:1.监听哪些文件发生变化2.当文件发生变化的时候去执行哪个任务---》(为一个集合)
  */
  gulp.task("scss",function()
  gulp.task("scss/**/*.scss,sass",["cssmin"])
  )


5.服务器--->cnpm install gulp-connect --save-dev
  参数:
  root:设置目录
  port:端口号
  livereload:当设置为true的时候,gulp会自动检测文件的变化然后自动进行源码构建
  /*搭建本地服务器*/
  var connect = require("gulp-connect");
  gulp.task("server",function()
    connect.sercer(
      root:"src",//路径
      port:123,//端口号
      livereload:true,//检测文件变化
    )
  )
6.自动刷新
  /*搭建本地服务器*/
  var connect = require("gulp-connect");
    gulp.task("server",function()
    connect.server(
      root:"src",
      port:123,
    livereload:true,

    )
  )
  /*实现自动刷新*/
  //server+watch 注意服务跟监听只能存在一个
  //因此我们需要把刷新和服务器开启为2部分
  gulp.task("server-watch",funcion()
    gulp.watch("src/index.html",function()
    gulp.src("src/index.html").pipe(connect.reload())
  )
  gulp.task("server-task",["server","server-watch"])

 

7.转义ES6 gulp-babel--->cnpm install --save-dev gulp-babel @babel/core @babel/preset-env
  const gulp = require(‘gulp‘);
  const babel = require(‘gulp-babel‘);

  gulp.task(‘babel‘, () =>
     gulp.src(‘src/es6.js‘)
     .pipe(babel(
       presets: [‘@babel/env‘]
     ))
     .pipe(gulp.dest(‘dist‘))
    );
  )

 

本文主要是借鉴华哥的,之所以码出来是便于系统的体验一把,还更好记!!

https://www.cnblogs.com/nanianqiming/p/8028536.html

以上是关于gulp学习记录的主要内容,如果未能解决你的问题,请参考以下文章

gulp使用学习记录

webpack学习记录-管理资源

Gulp

Gulp

webpack4.x学习笔记

基于 gulp 的 fancybox 源码压缩