一、建立package.json檔案

npm init    // 一路回車就行（預設已安裝node）

package.json內容如下:

 {
     "name": "gulp-project",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": ""
 
,
     "license": "ISC"
 }

二、安裝專案依賴

1、全域性安裝gulp

    npm i -g gulp

2、安裝專案所需模組

	npm i -D gulp gulp-concat gulp-uglify gulp-csso gulp-imagemin gulp-clean
	
    /**
     * gulp         gulp模組
     * gulp-concat  合併檔案
     * gulp-uglify  壓縮js
     * gulp-csso    壓縮css
     * gulp-imagemin    壓縮圖片
     * gulp-clean   清空資料夾
    */
    
 

三、新建gulpfile.js檔案，引入模組

    var gulp = require('gulp');
    var concat = require('gulp-concat');        // 合併檔案
    var uglify = require('gulp-uglify');        // js 壓縮
    var csso = require('gulp-csso');            // css壓縮
    var imagemin = require('gulp-imagemin');    // 圖片壓縮
    var clean = require(
 
'gulp-clean');          // 清空資料夾

四、建立gulp任務

    // 打包html
    gulp.task('html', function(){
        return gulp.src('./src/*.html')
            .pipe(gulp.dest('./dist'));
    });

    // 打包js
    gulp.task('js_libs', function(){
        return gulp.src('./src/libs/js/*.js')
            .pipe(gulp.dest('./dist/js'));
    });
    gulp.task('js_main', function(){
        return gulp.src('./src/js/*.js')
            .pipe(concat('main.min.js'))    // 合併檔案並命名
            .pipe(uglify())  // 壓縮js
            .pipe(gulp.dest('./dist/js'));
    });

    // 打包css
    gulp.task('css_main', function(){
        return gulp.src('./src/css/**/*.css')
            .pipe(concat('main.min.css'))
            .pipe(csso())                   // 壓縮優化css
            .pipe(gulp.dest('./dist/css'));
    });

    // 打包其他資源
    gulp.task('images', function () {
        return gulp.src('./src/images/*.*')
            .pipe(imagemin({
                progressive: true,
            }))
            .pipe(gulp.dest('./dist/images'));
    });

    // 清空dist資料夾
    gulp.task('clean', function(){
        return gulp.src(['./dist/*'])
            .pipe(clean());
    });

    // 預設任務
    gulp.task('default', ['clean'], function() {
        gulp.start(['html', 'js_libs', 'js_main','css_main','images'])
    });

五、執行打包命令

    gulp

六、檔案目錄

七、說明

這裡展示的是最基礎的gulp構建功能，後續會深入解決gulp各項模組的應用，實現全方位的自動化構建。

相關文章

gulp構建專案（二）：啟本地服務