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的理解 适合初学者简单学习 如果你也喜欢前端 那么请关注我吧！