gulp4 代碼壓縮及合併實例

安裝 gulp 及依賴

安裝 gulp 命令行工具

npm install --global gulp-cli

在項目目錄下創建 package.json 文件

npm init

安裝 gulp，作爲開發時依賴項

npm install --save-dev gulp

安裝依賴

# HTML、JavaScript、CSS壓縮
npm install --save-dev gulp-htmlmin gulp-cssnano gulp-uglify   

# 合併和重命名
npm install --save-dev gulp-concat gulp-rename   

編輯 gulpfile 文件

利用任何文本編輯器在項目大的根目錄下創建一個名爲 gulpfile.js 的文件，並在文件中輸入以下內容：

var gulp = require('gulp');
var rename = require('gulp-rename');		// 重命名
var concat = require('gulp-concat');		// 合併
var uglify = require('gulp-uglify');		// 壓縮 JavaScript
var htmlmin = require('gulp-htmlmin');		// 壓縮 HTML
var cssnano = require('gulp-cssnano');		// 壓縮 CSS

//壓縮html
gulp.task('html', function(done){
    gulp.src('./templates/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,   //壓縮HTML
            removeComments:true         //清除HTML註釋
        }))
        .pipe(gulp.dest('./dist/templates'));
    done();
});


//壓縮css
gulp.task('css', function(done){
    gulp.src(['./css/style.css'])
        .pipe(concat('style.css'))
        .pipe(cssnano())
        .pipe(rename({suffix: '.min'})) //rename壓縮後的文件名 
        .pipe(gulp.dest('dist/css'));
    done();
});

//壓縮js插件
gulp.task('lib', function(done){
    gulp.src(['./lib/ahnx/*.js'])
        .pipe(concat('ahnxLib.js'))
        .pipe(uglify({mangle:false}))
		.pipe(rename({suffix: '.min'})) //rename壓縮後的文件名 
        .pipe(gulp.dest('dist/js'));
    done();
});

//壓縮首頁加載必須js文件
gulp.task('app', function(done){
    gulp.src(['./js/app.js','./js/tools/*.js'])
        .pipe(concat('app.js'))
        .pipe(uglify({mangle:false}))
		.pipe(rename({suffix: '.min'})) //rename壓縮後的文件名 
        .pipe(gulp.dest('dist/js'));
    done();
});

// 壓縮 JavaScript 開發文件
gulp.task('js', function(done){
    gulp.src(['./js/controllers/*.js','./app.js'])
        .pipe(uglify({mangle:false}))
		.pipe(rename({suffix: '.min'})) //rename壓縮後的文件名 
        .pipe(gulp.dest('dist/js/controllers'));
    done();
});

gulp.task('build', gulp.series('html', 'css', 'lib', 'app','js'));

執行 gulp build

**輸出文件夾目錄如下
**