Node Js-----gulp

gulp自动化构建工具

1、gulp默认运行gulpfile.js

2、gulp.task(taskname,callback)创建任务

3、设置 gulp运行文件 gulp -f=要运行的文件如果设置为default

4、npm 下的script字段用来定义指令通过npm run key（名字）运行当名字为start时可以忽略run

5、gulp.src（路径字符串/数组）用来加载指定文件

6、gulp.dest（路径）输出文件路径若不存在自动创建

7、gulp.watch()监听文件

常用的一些gulp插件

1、gulp-scss 编译scss 2 gulp-autoprefixer 添加浏览器内核 3 gulp-uglify 压缩js文件 4 gulp-htmlmin 压缩html文件

共三个步骤

一、npm下载二、引用插件三、调用插件

1、gulp安装 npm-install gulp -g (全局下安装gulp插件 install 可以简写成 i)

npm-root -g （查看全局下载地址） npm config set perfix（改）路径设置全局下载地址

npm config set cache 设置默认缓存地址

1 gulp 默认运行gulpfile.js文件若文件别名则在package.json里修改scripts

{
    "name": "week3",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "guls": "gulp guls"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "gulp": "^4.0.1",
        "gulp-sass": "^4.0.2",
        "gulp-uglify": "^3.0.2",
        "gulp-webserver": "^0.9.1"
    }
}

当设置为gulpfile.js文件时启动guls npm run guls

否则设置 gulp gulp-f=(地址)

npm下的script字段用来定义指令通过npm run key（名字）运行

当key为stat时可忽略run

加载模块的写入

const gulp=require("gulp");
const gulpSass=require("gulp-sass");
const gulpAutoprefixer=require("gulp-autoprefixer");
const gulpCssmin=require("gulp-cssmin");
const gulpBabel=require("gulp-babel");
const gulpUglify=require("gulp-uglify");
const gulpHtmlmin=require("gulp-htmlmin");
const gulpWebserver=require("gulp-webserver")

css压缩

gulp.task("minCss",()=>{
    return gulp.src("./src/css/*.css")
    .pipe(
        gulpCssmin()
    )
    .pipe(
        gulp.dest("./dist/css/")
    )
})

js压缩

gulp.task("minJS",()=>{
    return gulp.src("./src/js/*.js")
    .pipe(
        gulpBabel()
    )
    .pipe(
        gulpUglify()
    )
    .pipe(
        gulp.dest("./dist/js/")
    )
})

html压缩

gulp.task("htmlmin",()=>{
    return gulp.src("./src/index.html")
    .pipe(
        gulpHtmlmin({
            collapseWhitespace: true,
            minifyJS:true,//压缩页面js
            minifyCSS:true//压缩页面css
        })
    )
    .pipe(
        gulp.dest("./dist/")
    )
})

　以上是简单的css编译与js压缩的简单实例根据不同require 调用不同的功能利用pipe进行管道流输出相当于做某件事情执行完根据gulp.dest输出文件（路径）路径若不存在则自动创建路径

gulp-uglify用来压缩js文件（不支持Es6语法）可根据babel把 ES6——ES5 编辑javascript https://www.babeljs.cn/ (babel中文网地址)

创建.babelrc是babel的配置文件 babel 要编译的文件 -o 要输出的文件 .babelrc里面写入

{
  "presets": ["@babel preset -env"]
}

gulp的两个内置模块 parallel series

gulp.parallel() 并行运行任务 gulp. series () 运行任务序列

webserver 简单的搭建服务器

   //搭建服务器 
gulp.task("server", () => {
    gulp.src("./dist/")
        .pipe(server({
            port: 7012,
            //端口号
            livereload:true,
            //自动刷新
            open: true,
            //自动打开
            middleware: (req, res) => {
                pathName = url.parse(req.url).pathname
                pathName = pathName === "/" ? "index.html" : pathName
                let isfile = path.extname(pathName)
                if (isfile) {
                    fs.readFile(path.join("dist", pathName), (error, date) => {
                        if (error) {
                            res.end(error)
                            return
                        }
                        res.end(date)
                    })
                }
               //此处利用switch 判断是端口的情况

            }
        }))
})

以上只是初步的gulp的理解适合初学者简单学习如果你也喜欢前端那么请关注我吧！