打包壓縮js,css,支持sass編譯成css,圖片壓縮,圖片組建成精靈圖,靜態文件拷貝,實時監聽變化自動刷新瀏覽器 //引入相關插件 var gulp = require('gulp'); var rename = require('gulp-rename'); //文件重命名 var uglify = require('gulp-uglify'); //JS代碼壓縮 var minCSS = require('gulp-clean-css'); //CSS代碼壓縮 var autoprefixer = require('gulp-autoprefixer'); //添加瀏覽器前綴 var clean = require('gulp-clean'); //清空文件 var cleanDest = require('gulp-clean-dest'); //清空dist目錄指定文件 var changed = require('gulp-changed'); //僅僅傳遞更改過的文件 var imagemin = require('gulp-imagemin'); //圖片壓縮 var spritesmith = require('gulp.spritesmith'); //PNG圖片合併成精靈圖 const filter = require('gulp-filter'); //js壓縮過濾器,排除已壓縮過的 var sass = require('gulp-sass'); //處理sass文件 var browserSync = require('browser-sync'); //擁有實時重載服務器 var reload = browserSync.reload; //編譯後重新刷新瀏覽器 var buffer = require('vinyl-buffer'); var merge = require('merge-stream'); var pageSrc = 'src/pages/**/*.html'; var pageDist = 'dist/pages/'; var jsSrc = 'src/js/**/*.js'; var jsDist = 'dist/js/'; var cssSrc = 'src/css/**/*.css'; var cssDist = 'dist/css/'; var sassSrc = 'src/sass/**/*.scss'; var sassDist = 'src/css/'; var imgSrc = 'src/images/*'; var imgDist = 'dist/images/'; var iconfontSrc = 'src/iconfont/*'; var iconfontDist = 'dist/iconfont/'; var staticSrc = 'src/static/*'; var staticDist = 'dist/static/'; var spriteSrc = 'src/images/*.png'; var spriteDist = 'src/images/sprite'; gulp.task('html', function() { //拷貝html return gulp.src(pageSrc) .pipe(changed(pageDist)) .pipe(cleanDest(pageDist))//先清空後生成 .pipe(gulp.dest(pageDist)) .pipe(reload({ stream:true })); }); //對已經壓縮過的文件進行過濾,不再壓縮 var jsFilter = filter([jsSrc, '!src/js/**/*.min.js'], {restore: true}); gulp.task('js', function() { //拷貝壓縮js return gulp.src(jsSrc) .pipe(changed(jsDist)) .pipe(cleanDest(jsDist))//先清空後生成 .pipe(jsFilter) // 這會輸出一個未壓縮過的版本 .pipe(gulp.dest(jsDist)) // 這會輸出一個壓縮過的並且重命名未 foo.min.js 的文件 .pipe(uglify()) .pipe(rename({ extname: '.min.js' })) .pipe(jsFilter.restore) .pipe(gulp.dest(jsDist)) .pipe(reload({ stream:true })); }); gulp.task('css', function() { //拷貝壓縮css return gulp.src(cssSrc) .pipe(changed(cssDist)) .pipe(cleanDest(cssDist))//先清空後生成 .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) // 這會輸出一個未壓縮過的版本 .pipe(gulp.dest(cssDist)) .pipe(minCSS()) .pipe(rename({ extname: '.min.css' })) .pipe(gulp.dest(cssDist)) .pipe(reload({ stream:true })); }); gulp.task('sass', function () { //將sass文件編譯成css return gulp.src(sassSrc) .pipe(changed(sassSrc)) .pipe(cleanDest(sassDist))//先清空後生成 .pipe(sass()) .pipe(gulp.dest(sassDist)) .pipe(reload({ stream:true })); }); gulp.task('img', function() { //拷貝壓縮圖片 return gulp.src([imgSrc,'src/images/**/*']) .pipe(changed(imgSrc)) .pipe(cleanDest(imgDist))//先清空後生成 // 這會輸出一個未壓縮過的版本 .pipe(imagemin([ imagemin.gifsicle({interlaced: true}), imagemin.jpegtran({progressive: true}), imagemin.optipng({optimizationLevel: 5}), imagemin.svgo({ plugins: [ {removeViewBox: true}, {cleanupIDs: false} ] }) ])) .pipe(gulp.dest(imgDist)) .pipe(reload({ stream:true })); }); gulp.task('sprite', function () { //產出精靈圖 /* //img,css產出的路徑相同時 var spriteData = gulp.src(spriteSrc).pipe(cleanDest(spriteDist)).pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })); return spriteData.pipe(gulp.dest(spriteDist));*/ var spriteData = gulp.src(spriteSrc) .pipe(cleanDest(spriteDist)) .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })); //設置打包的圖片路徑 var imgStream = spriteData.img .pipe(buffer()) .pipe(imagemin()) .pipe(gulp.dest(spriteDist)); //設置打包的css路徑 var cssStream = spriteData.css .pipe(gulp.dest('src/css/sprite')); return merge(imgStream, cssStream); }); gulp.task('ifont', function () { //拷貝圖標字體 return gulp.src(iconfontSrc) .pipe(changed(iconfontDist)) .pipe(cleanDest(iconfontDist))//先清空後生成 .pipe(gulp.dest(iconfontDist)) .pipe(reload({ stream:true })); }); gulp.task('static', function () { //拷貝靜態資源,如json數據 return gulp.src(staticSrc) .pipe(changed(staticDist)) .pipe(cleanDest(staticDist))//先清空後生成 .pipe(gulp.dest(staticDist)) .pipe(reload({ stream:true })); }); //清除dist目錄 gulp.task('clean', function () { return gulp.src('dist', {read: false}) .pipe(clean()); }); //初始化時,批量執行多個操作 gulp.task('build', ['html','sass', 'css','js','sprite','img','ifont','static']); //開啓本地服務器監視文件改動 gulp.task('serve', function() { browserSync({ open:false, server: { baseDir: 'dist', index : "/pages/index.html" //將dist目錄下的index.html作爲入口頁面訪問 } }); }); //啓動項目,命令:gulp start , // 瀏覽器訪問地址:http://localhost:3000/pages/index.html gulp.task('start',['clean'], function() { gulp.start(['build','serve']); gulp.watch(pageSrc, ['html']); gulp.watch(sassSrc, ['sass']); gulp.watch(cssSrc, ['css']); gulp.watch(jsSrc, ['js']); gulp.watch('src/images/*.png', ['sprite']); gulp.watch(imgSrc, ['img']); gulp.watch(iconfontSrc, ['ifont']); gulp.watch(staticSrc, ['static']); }); gulp.task('tojsp', function() { //新增jsp文件 return gulp.src('dist/pages/**/*.html') .pipe(rename({ extname: '.jsp' })) .pipe(gulp.dest('dist/views/')) }); 說明:使用 BrowserSync 和 gulp,你可以輕鬆地創建一個開發服務器,然後同一個 WiFi 中的任何設備都可以方便地訪問到。BrowserSync 同時集成了 live-reload 所以不需要另外做配置了。打開一個瀏覽器,訪問默認的 URL (http://localhost:3000)
當前案例的目錄結構爲:(目錄粗略圖,詳細圖)
注:當你啓動項目後直接瀏覽器輸入http://localhost:3000時可能返回的頁面信息是:Get Error,排除了項目配置錯誤及代碼書寫錯誤後,該錯誤可能是你的訪問地址沒有進入到指定頁面,倘若你的項目目錄結構比較複雜,主頁面不是直接暴露在外面,此時你需要在地址後面補充訪問的頁面路徑,例如我這邊的訪問時:http://localhost:3000/pages/home/home.html