gulp -- 前端自動化管理工具的使用

1、gulp使用時需要安裝2次,全局安裝和本地安裝(前提是要有nodeJS)

npm install --save-dev gulp//全局安裝
npm install --save-dev gulp//本地安裝 跳到本地文件夾下,再安裝一次

2、需要在本地建一個gulpFile.js文件

3、在gulpFile.js文件下引入第三方模塊

var gulp = require("gulp");
//壓縮代碼模塊 需本地安裝
var uglify = require("gulp-uglify");//壓縮js
var cssmin = require("gulp-clean-css");//壓縮css
var html = require("gulp-html-minify");//壓縮html
var p_w_picpathmin = require("gulp-p_w_picpathmin");//壓縮p_w_picpath圖片
//創建任務
gulp.task("default",function(){
    this.src("./public/js/audio.js")//被壓縮的文件路徑
           .pipe(uglify())//pipe 管道
           .pipe(gulp.dest("dist/public/js"))//dest  文件的流向 即文件壓縮完之後,要放置的位置
})
gulp.task("default",function(){
    this.src("./pnblic/css/song.css")
        .pipe(cssmin())
        .pipe(gulp.dest("dist/public/css"))
})
gulp.task("default",function(){
    this.src("./html/*.html")
        .pipe(html(Some text and markup)())
        .pipe(gulp.dest("dist/"))
})
gulp.task("default",function(){
    this.src("imgmin")
        .pipe(html(Some text and markup)())
        .pipe(gulp.dest("dist/public/p_w_picpath"))
})
gulp.task("default",function(argument){
    gulp run(["uglify","cssmin","html","p_w_picpathmin"])
})


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章