1. 程式人生 > >gulp構建專案(一):環境準備

gulp構建專案(一):環境準備

一、建立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構建專案(二):啟本地服務