gulp的簡單打包示例(一)

引言

• 前端開發，打包工具是必不可少的，雖然有很多別人幫你封裝好的打包工具，但自己配置一個，自身的實力也會大增呀。這篇博文主要講的是使用gulp對html、js、less、css、圖片的壓縮合並等配置。同時也可以閱讀我另外一篇博文gulp實現自動化打包(二)

gulp的API文檔

• 主要有四個，下面是我的簡單理解，詳細請看中文文檔 gulp

一：gulp.src(globs[, options]) --->指向指定路徑的所有文件, 返回文件流對象，即為要操作的文件路徑，可以是數組
二：gulp.dest(path[, options]) --->當操作完源文件，輸出目標文件的路徑
三：gulp.task(name[, deps], fn) --->注冊一個任務，在項目根目錄輸入、執行命令gulp name 可以執行相應的任務
四：gulp.watch(glob[, opts], tasks) --->可以監視某個文件是否變化

下載安裝gulp

全局安裝

npm install --global gulp

項目安裝，即為項目的根目錄安裝gulp

npm install --save-dev gulp

我的項目結構

每個人的項目結構，有所不同，但這不是重點

gulpfile.js文件的配置

下載插件

"devDependencies": {
    "gulp": "^3.9.1",
    //html
    "gulp-htmlmin": "^5.0.1",
    //圖片
    "gulp-imagemin": "^5.0.3",
    //less
    "gulp-less": "^4.0.1",
    //css
    "gulp-minify-css": "^1.2.4",
    //js
    "gulp-uglify": "^3.0.1",
    //js、css的合並
    "gulp-concat": "^2.6.1"
}

引入需要的插件

var gulp = require('gulp')

var concat = require('gulp-concat')
var htmlmin = require('gulp-htmlmin')
var uglify = require('gulp-uglify')
var less = require('gulp-less')
var minifyCss = require('gulp-minify-css')
var imagemin = require('gulp-imagemin')
var rename = require('gulp-rename')

html文件的壓縮

gulp.task('html', function () {
    return gulp.src('./src/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,//清除html文件的空格
            minifyJS: true,//壓縮html文件的js代碼
            minifyCSS:true,//壓縮html文件的css代碼
            removeComments: true,//清除html文件的注釋
            removeSciptTypeAttributes: true,//清除所有script標簽中的type="text/javascript"屬性
            removeStyleLinkTypeAttributes: true//清楚所有Link標簽上的type屬性
        }))
        .pipe(gulp.dest('./dist/'))//最后輸出文件保存在dist文件根目錄中
})

js代碼的壓縮

//壓縮、合並js文件
gulp.task('js', function () {
    return gulp.src('./src/js/*.js')
        .pipe(concat('built.js')) //合並到臨時文件
        .pipe(gulp.dest('./dist/js/')) //生成到目標文件夾
        .pipe(rename({
            dirname: "index",    // 路徑名
            basename: "goodbye", // 主文件名
            prefix: "pre-",      // 前綴
            suffix: "-min",      // 后綴
            extname: ".js"       // 擴展名
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'))
})

執行任務之后的dist文件夾目錄

less、css的壓縮合並，首先進行的是less編譯為css文件，編譯的css文件還是輸出在src/css文件夾中，再進行css文件的壓縮合並

//less文件編譯為css文件
gulp.task('less', function () {
    return gulp.src('./src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./src/css/'))
})

//合並、重命名、壓縮css文件
gulp.task('css', ['less'], function () {
    return gulp.src('./src/css/*.css')
        .pipe(concat('build.css'))//合並到臨時文件
        .pipe(gulp.dest('./dist/css/'))//合並文件build.css輸出路徑
        .pipe(rename({
            dirname: "index",    // 路徑名
            basename: "index",   // 主文件名
            prefix: "cs-",        // 前綴
            suffix: "-min",      // 后綴
            extname: ".css"       // 擴展名
        }))
        .pipe(minifyCss())
        .pipe(gulp.dest('./dist/css/'))
})

執行任務之后的dist文件夾目錄

圖片的壓縮

//壓縮圖片
gulp.task('img', function () {
    return gulp.src('./src/imgs/*.*')
        .pipe(imagemin({progressive: true}))
        .pipe(gulp.dest('./dist/imgs/'))
})

注冊一個默認的任務default，當執行gulp default時， ['html', 'pages', 'css', 'less', 'js', 'img']里面的任務都會被執行一遍，因此就不用分別執行每一個任務

gulp.task('default', ['html', 'pages', 'css', 'less', 'js', 'img'])

完整的gulpfile.js文件

var gulp = require('gulp')

var concat = require('gulp-concat')
var htmlmin = require('gulp-htmlmin')
var uglify = require('gulp-uglify')
var less = require('gulp-less')
var minifyCss = require('gulp-minify-css')
var imagemin = require('gulp-imagemin')
var rename = require('gulp-rename')


//壓縮 主頁 html文件
gulp.task('html', function () {
    return gulp.src('./src/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
            minifyJS: true,
            minifyCSS:true,
            removeComments: true,
            removeSciptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true
        }))
        .pipe(gulp.dest('./dist/'))
})

//壓縮子頁面的html
gulp.task('pages', function () {
    return gulp.src('./src/pages/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
            minifyJS: true,
            minifyCSS:true,
            removeComments: true,
            removeSciptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true
        }))
        .pipe(gulp.dest('./dist/pages/'))
})

//壓縮js文件
gulp.task('js', function () {
    return gulp.src('./src/js/*.js')
        .pipe(concat('build.js')) //合並到臨時文件
        .pipe(gulp.dest('./dist/js/')) //生成到目標文件夾
        .pipe(rename({
            dirname: "index",    // 路徑名
            basename: "index",   // 主文件名
            prefix: "cs-",        // 前綴
            suffix: "-min",      // 后綴
            extname: ".js"       // 擴展名
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'))
})

//壓縮less文件
gulp.task('less', function () {
    return gulp.src('./src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./src/css/'))
})

//壓縮css文件
gulp.task('css', ['less'], function () {
    return gulp.src('./src/css/*.css')
        .pipe(concat('build.css'))//合並到臨時文件
        .pipe(gulp.dest('./dist/js/'))//生成到目標文件夾
        .pipe(rename({
            dirname: "index",    // 路徑名
            basename: "index",   // 主文件名
            prefix: "cs-",        // 前綴
            suffix: "-min",      // 后綴
            extname: ".css"       // 擴展名
        }))
        .pipe(minifyCss())
        .pipe(gulp.dest('./dist/css/'))
})

//壓縮圖片
gulp.task('img', function () {
    return gulp.src('./src/imgs/*.*')
        .pipe(imagemin({progressive: true}))
        .pipe(gulp.dest('./dist/imgs/'))
})

//注冊一個默認的任務
gulp.task('default', ['html', 'pages', 'css', 'less', 'js', 'img'])