gulp需要全局安裝和當前目錄都安裝才能使用gulp命令

安裝gulp插件

npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev

gulp-rev：給每個文件添加版本號，根據文件內容計算hash碼，修改文件名，避免客戶端緩存問題

gulp-rev-replace：更新index中的引用

gulp-useref：通過注釋合并js、css文件

gulp-filter：將stream里的文件根據一定的規則進行篩選過濾

gulp-uglify：壓縮js

gulp-csso：壓縮css

//聲明依賴包 var gulp = require('gulp'); var rev = require('gulp-rev'); var revReplace = require('gulp-rev-replace'); var useref = require('gulp-useref'); var filter = require('gulp-filter'); var uglify = require('gulp-uglify'); var csso = require('gulp-csso')gulp.task("default",function () {//定義過濾規則，!index.html指忽略此文件，index.html不用加版本號var jsFilter = filter('**/*.js',{restore: true});var cssFilter = filter('**/*.css',{restore: true});var indexHtmlFilter = filter(['**/*','!index.html'],{restore: true})return gulp.src('index.html') //找到index.html文件進行處理.pipe(useref())　　　　　　　//通過useref插件分析index中帶有注釋的css和js文件，放入流中，此時流中包含index、css、js文件.pipe(jsFilter)　　　　　　　//篩選js文件.pipe(uglify())　　　　　　　//壓縮.pipe(jsFilter.restore) //js文件返回流.pipe(cssFilter) //篩選css文件.pipe(csso()) //壓縮.pipe(cssFilter.restore) //css文件返回流.pipe(indexHtmlFilter) //篩選所有文件，排除index.html.pipe(rev())　　　　　　　　 //生成hash版本號文件名.pipe(indexHtmlFilter.restore) //文件返回流.pipe(revReplace()) //更新index.html中對css、js的引用 .pipe(gulp.dest('dist')); //將文件流放入dist目錄 })

使用/*! ...?*/的注釋不會被壓縮，如果你的版權聲明不想被壓縮可以使用/*! ...?*/注釋。

css注釋

<!-- build:css css/combined.css --> <link> <!-- endbuild -->

javascript注釋

<!-- build:js js/combined.js --> <script></script> <!-- endbuild -->

?

轉載于:https://www.cnblogs.com/tgxh/p/6322375.html

總結

以上是生活随笔為你收集整理的gulp使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。