gulp學習筆記2

標籤：gem   變數   progress   語言   div   isp   less   blog   http   

1、 壓縮 CSS

壓縮 css 代碼可降低 css 檔案大小，提高頁面開啟速度。

目標：找到 css/ 目錄下的所有 css 檔案，壓縮它們，將壓縮後的檔案存放在 dist/css/ 目錄下。

在壓縮之前，需要安裝新的模組，輸入以下命令列：

npm install gulp-minify-css

在對應目錄建立 gulpfile.js 檔案並寫入如下內容：

// 擷取 gulpvar gulp = require(‘gulp‘)// 擷取 minify-css 模組（用於壓縮 CSS）var minifyCSS = require(‘gulp-minify-css‘)// 壓縮 css 檔案// 在命令列使用 gulp css 啟動此任務gulp.task(‘css‘, function () {    // 1. 找到檔案    gulp.src(‘css/*.css‘)    // 2. 壓縮檔        .pipe(minifyCSS())    // 3. 另存新檔壓縮檔        .pipe(gulp.dest(‘dist/css‘))})

此時在命令列輸入：

gulp css

gulp 會建立 dist/css 目錄，並建立 對應的.css 檔案，此檔案存放壓縮後的 css 代碼。

 

2、壓縮圖片

壓縮 圖片檔案可降低檔案大小，提高圖片載入速度。

目標：找到 images/ 目錄下的所有檔案，壓縮它們，將壓縮後的檔案存放在 dist/images/ 目錄下。

在壓縮之前，需要安裝新的模組，輸入以下命令列：

npm install gulp-imagemin

在對應目錄建立 gulpfile.js 檔案並寫入如下內容：

// 擷取 gulpvar gulp = require(‘gulp‘);// 擷取 gulp-imagemin 模組var imagemin = require(‘gulp-imagemin‘)// 壓縮圖片任務// 在命令列輸入 gulp images 啟動此任務gulp.task(‘images‘, function () {    // 1. 找到圖片    gulp.src(‘images/*.*‘)    // 2. 壓縮圖片        .pipe(imagemin({            progressive: true        }))    // 3. 另存圖片        .pipe(gulp.dest(‘dist/images‘))});

你可以訪問 gulp-imagemin 以查看更多用法。

此時在命令列輸入：

gulp images

在 gulpfile.js 對應目錄建立 images 檔案夾，並在 images/ 目錄下存放圖片。

 

3、編譯 LESS

Less 是一門 CSS 預先處理語言，它擴充了 CSS 語言，增加了諸如變數、混合（mixin）、函數等功能，讓 CSS 更易維護。

在編譯之前，需要安裝新的模組，輸入以下命令列：

npm install gulp-less

在對應目錄建立 gulpfile.js 檔案並寫入如下內容：

 

// 擷取 gulpvar gulp = require(‘gulp‘)// 擷取 gulp-less 模組var less = require(‘gulp-less‘)// 編譯less// 在命令列輸入 gulp less 啟動此任務gulp.task(‘less‘, function () {    // 1. 找到 less 檔案    gulp.src(‘less/**.less‘)    // 2. 編譯為css        .pipe(less())    // 3. 另存檔案        .pipe(gulp.dest(‘dist/css‘))});

你可以訪問 gulp-less 以查看更多用法。

此時在命令列輸入：

gulp less

在 gulpfile.js 對應目錄建立 dist/css 檔案夾，並在 dist/css 目錄下存放圖片。

 

 

 

3\

gulp學習筆記2