# 1、安裝淘寶映象 npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm -v # 2、生成專案描述檔案 package.json npm init cnpm init (可代替 npm init) （需要專案名稱、版本號、描述、入口檔案、執行命令、作者、證書 ---- 一路按回車即可） # 3、全域性安裝gulp cnpm i gulp@3 -g **全域性安裝gulp** **@3 代表選擇了 3 的版本** **i 即為 install** **-g 即為 --global** gulp -v # 4、當前目錄內部安裝 gulp 模組 cnpm i gulp@3 -D cnpm i gulp@3 -S （二者選擇其一即可） **-D 縮寫 --save-dev 開發依賴** **-S 縮寫 --save 專案依賴** 開發依賴： 開發過程中需要使用到的依賴的模組，專案上線時不需要的模組 --- 程式碼格式校驗的模組 專案依賴： 專案上線仍然需要使用的模組 ----- 如果不知道怎麼選擇，那你就寫 -S # 5、建立檔案 gulpfile.js ,配置gulp ``` const gulp = require('gulp'); ``` ## 5.1 建立 index.html，使用gulp完成對於index.html的複製操作，複製到當前目錄的dist目錄內 ``` +++ // 複製index.html 到 dist 目錄 gulp.task('copy-index', function () { gulp.src('./index.html') .pipe(gulp.dest('dist')) }) ``` 命令列執行了 gulp copy-index 發現多了 dist目錄 ## 5.2 gulp/css/a.css + gulp/css/b.css ### 5.2.1 複製 gulp/css 至 dist/css gulp.src('./css/**/*') 拷貝css資料夾下的所有檔案以及資料夾內的檔案 ``` +++ gulp.task('copy-css', function () { gulp.src('./css/**/*') .pipe(gulp.dest('dist/css')) }) ``` gulp copy-css ### 5.2.2 合併css檔案 cnpm i gulp-concat -S ``` //++++ const concat = require('gulp-concat'); gulp.task('copy-css', function () { gulp.src('./css/**/*') // 拿到所有的css // ++++ .pipe(concat('main.css')) // 合併 .pipe(gulp.dest('dist/css')) }) ``` ### 5.2.3 壓縮css cnpm i gulp-minify-css -S ``` // ++++ const minifyCss = require('gulp-minify-css'); gulp.task('copy-css', function () { gulp.src('./css/**/*') // 拿到所有的css .pipe(concat('main.css')) // 合併 // ++++ .pipe(minifyCss()) // 壓縮 .pipe(gulp.dest('dist/css')) }) ``` ### 5.2.4 既要 未壓縮的也要有壓縮的 cnpm i gulp-rename -S 重新命名 合併程式碼放到dist/css 壓縮css 重新命名 再放到dist/css ``` //+++ const rename = require('gulp-rename'); gulp.task('copy-css', function () { gulp.src('./css/**/*') // 拿到所有的css .pipe(concat('main.css')) // 合併 //+++ .pipe(gulp.dest('dist/css')) .pipe(minifyCss()) // 壓縮 //+++ .pipe(rename('main.min.css')) .pipe(gulp.dest('dist/css')) }) ``` ## 5.3 gulp/js/a.js + gulp/js/b.js ### 5.3.1 複製gulp/js 至 dist/js ``` gulp.task('copy-js', () => { gulp.src('./js/**/*') .pipe(gulp.dest('dist/js')) }) ``` ### 5.3.2 合併js程式碼至 dist/js ``` gulp.task('copy-js', () => { gulp.src('./js/**/*') // +++ .pipe(concat('main.js')) .pipe(gulp.dest('dist/js')) }) ``` ### 5.3.3 壓縮js cnpm i gulp-uglify -S 壓縮js模組 ``` //+++ const uglify = require('gulp-uglify'); gulp.task('copy-js', () => { gulp.src('./js/**/*') .pipe(concat('main.js')) // 合併js // +++ .pipe(uglify()) // 壓縮js .pipe(gulp.dest('dist/js')) }) ``` ### 5.3.4 合併壓縮重新命名 ``` gulp.task('copy-js', () => { gulp.src('./js/**/*') .pipe(concat('main.js')) // 合併js // +++ .pipe(gulp.dest('dist/js')) .pipe(uglify()) // 壓縮js // +++ .pipe(rename('main.min.js')) .pipe(gulp.dest('dist/js')) }) ``` ## 5.4 gulp/assets --- 圖片 ### 5.4.1 複製圖片至 dist/assets ``` //+++ gulp.task('copy-images', () => { gulp.src('./assets/**/*') .pipe(gulp.dest('dist/assets')) }) ``` ### 5.4.2 壓縮圖片 cnpm i gulp-imagemin -S ``` //+++ const imagemin = require('gulp-imagemin'); gulp.task('copy-images', () => { gulp.src('./assets/**/*') // +++ .pipe(imagemin()) // 壓縮圖片 .pipe(gulp.dest('dist/assets')) }) ``` ## 5.5 處理資料 data/home.json data/kind.json 沒有後端介面時，自己的模擬資料 複製 ``` // +++ gulp.task('copy-data', () => { gulp.src('./data/**/*') .pipe(gulp.dest('dist/data')) }) ``` # 6、一次性執行多個任務 任務的名稱不要自己隨意定義，就寫build ``` // +++ gulp.task('build', ['copy-index', 'copy-css', 'copy-js', 'copy-images', 'copy-data'], () => { console.log('success') }) ``` # 7、gulp 伺服器 cnpm i gulp-connect -S server 任務名不能更改 ``` //+++ gulp.task('server', () => { connect.server({ // 說明伺服器的根目錄 root: 'dist', livereload: true // 實時更新 }) }) ``` # 8、檢測html檔案、css檔案、js檔案、圖片、資料的改變，執行不同的任務 ``` // +++ gulp.task('watch', () => { gulp.watch('index.html', ['copy-index']) gulp.watch('css/**/*', ['copy-css']) gulp.watch('js/**/*', ['copy-js']) gulp.watch('assets/**/*', ['copy-images']) gulp.watch('data/**/*', ['copy-data']) }) ``` # 9、同時預設執行 server 任務 和 watch 任務 ``` gulp.task('default', ['server', 'watch']) ``` gulp # 10、熱更新 --- 主動更新頁面 在頁面、css、js、圖片、資料相關任務最後執行一句話，重新啟動伺服器 ``` gulp.task('copy-data', () => { gulp.src('./data/**/*') .pipe(gulp.dest('dist/data')) .pipe(connect.reload()) //*********************************************