Node Js-----gulp

                                                                                                                    gulp自動化構建工具

一、gulp默認運行gulpfile.js

二、gulp.task(taskname,callback)建立任務

三、設置 gulp運行文件 gulp -f=要運行的文件 若是設置爲default

四、npm 下的script字段用來定義指令 經過npm run key（名字） 運行 當名字爲start時能夠忽略run

五、gulp.src（路徑 字符串/數組）用來加載指定文件

六、gulp.dest（路徑） 輸出文件 路徑若不存在自動建立

七、gulp.watch()監聽文件

 

經常使用的一些gulp插件 

一、gulp-scss 編譯scss  2 gulp-autoprefixer 添加瀏覽器內核  3 gulp-uglify 壓縮js文件 4  gulp-htmlmin 壓縮html文件  

共三個步驟 

1、npm下載   2、引用插件 3、調用插件 

一、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的理解 適合初學者簡單學習 若是你也喜歡前端 那麼請關注我吧！