gulp基本操作

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 -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 -watch，執行完之后更改外面的文件內容，dist中的文件內容也會隨之改變

// +++
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

gulp.task('default', ['server', 'watch'])

gulp

10、熱更新-主動更新頁面

在頁面、css、js、圖片、數據相關任務最后執行一句話，重新啟動服務器

gulp.task('copy-data', () => {
   gulp.src('./data/**/*')
       .pipe(gulp.dest('dist/data'))
       .pipe(connect.reload()) //*********************************************
})