gulp打包普通html專案

2021-08-22 11:59:35 字數 3105 閱讀 1136

說明:支援配置config輸入目錄 以及輸出目錄

支援hash css js image(有動態更換本地路徑時不建議使用hash)

支援合併css js 目前暫不支援合併後js路徑自動替換

支援自動替換html 引用檔案路徑

...*min.* 不參與壓縮&&hash

gulpfile.js**如下:

var gulp         = require('gulp'),

gulpignore = require('gulp-ignore'),

order = require('gulp-order'),

gulpif = require('gulp-if'),

clean = require('gulp-clean'),

uglify = require('gulp-uglify'),

concat = require('gulp-concat'),

rev = require('gulp-rev'),

cssmin = require('gulp-mini-css'),

imagemin = require('gulp-imagemin'),

htmlreplace = require('gulp-html-replace'),

minifyhtml = require('gulp-minify-html'),

htmlmin = require('gulp-htmlmin'),

revcollector = require("gulp-rev-collector"),

replace = require('gulp-replace'),

rename = require('gulp-rename'),

pump = require('pump'),

sequence = require('run-sequence');

var config =

var addminfile = function

(arr,folder)

return arr;

}config.js_sort = addminfile(config.js_sort,config.src_js)

config.js_sort.push('!'+config.src+'/**/*min.js')

config.css_sort = addminfile(config.css_sort,config.src_css)

config.css_sort.push('!'+config.src+'/**/*min.css')

///**

* 清理目標目錄

*/gulp.task('clean', function

(cb) )

/** * 執行js壓縮

*/gulp.task('minify:js', function

() ))

.pipe(concat(config.js_min_name))//合併 config.js_min_name

.pipe(uglify())//壓縮

// .pipe(rename())

.pipe(rev())

.pipe(gulp.dest(config.dist+'/'+config.dist_js))

.pipe(rev.manifest())

.pipe(gulp.dest(config.dist+'/'+config.dist_js))

});// 將未參與壓縮的檔案複製到dist/js下

gulp.task('copyjs', function

());

//壓縮css

gulp.task('cssmin:css', function

());

// 將未參與壓縮的檔案複製到dist/css下

gulp.task('copycss', function

());

//壓縮---無動態更改路徑 可以使用hash

// gulp.task('imagemin:image', function());

//壓縮---有動態更改路徑

gulp.task('imagemin:image', function

());

gulp.task('html-replace',function

() ))

.pipe(gulp.dest(config.dist));

});gulp.task('htmlmin:html', function

()))

.pipe(gulp.dest(config.dist));

});//html替換css、js檔案版本

gulp.task('rev-collector', function

() ))

.pipe(gulp.dest(config.dist));

});// 將其他檔案or資料夾移動到目標目錄

gulp.task('mvnotdealasset', function

() );

/**/**

* 監聽js檔案變改,即時呼叫任務執行js增量打包

*/ gulp.task('watch', function

() );

/*** 監聽css檔案變改,即時呼叫任務執行js增量打包

*/ gulp.task('watch', function

() );

/** * 開始執行

*/gulp.task('default', function

(cb) );

package.json檔案配置如下:

,

"author": "---"

, "license": "isc"

, "devdependencies": ,

"dependencies":

}

打包命令: 輸入gulp 然後回車

gulp打包專案配置

var gulp require gulp var htmlmin require gulp htmlmin 壓縮html var uglify require gulp uglify 壓縮js var babel require gulp babel es6轉es5 var cleancss re...

gulp不生成打包檔案 gulp打包詳解

gulp的作用 刪除檔案中冗餘的內容,壓縮檔案,減小檔案體積 實際專案中執行的都是壓縮完成以後的檔案 減小載入響應時間 gulp打包壓縮物件 html,css,js,sass,webserver 音訊,外掛程式等正常情況下都是打包完成的,直接移動到dist檔案中就可以 伺服器食慾gulp一起繫結執行...

gulp不生成打包檔案 gulp打包詳解

gulp的作用 刪除檔案中冗餘的內容,壓縮檔案,減小檔案體積 實際專案中執行的都是壓縮完成以後的檔案 減小載入響應時間 gulp打包壓縮物件 html,css,js,sass,webserver 音訊,外掛程式等正常情況下都是打包完成的,直接移動到dist檔案中就可以 伺服器食慾gulp一起繫結執行...