一份gulp的配置檔案

阿新 • • 發佈：2019-02-09

參考：

gulpfile.js如下：

/**
 * Created by admin on 2016/12/3.
 */

/**
 * 元件安裝
 * npm install gulp gulp-notify gulp-livereload gulp-sass gulp-rename gulp-autoprefixer gulp-cssnano jshint gulp-jshint gulp-uglify gulp-concat gulp-imagemin del --save-dev
 *
 * 參考：
 * http://www.dbpoo.com/getting-started-with-gulp/
 * https://markgoodyear.com/2014/01/getting-started-with-gulp/
 * http://blog.csdn.net/qq_15096707/article/details/52270355
 */

// 引入 gulp及元件
var gulp = require('gulp'),                 //基礎庫
    notify = require('gulp-notify'),           //通知

    //tinylr = require('tiny-lr'),               //livereload
    //server = tinylr(),
    //port = 35729,
    livereload = require('gulp-livereload'),   //livereload

    sass = require('gulp-sass'),          //sass
    rename = require('gulp-rename'),           //重新命名
    autoprefixer = require('gulp-autoprefixer'), // 處理css中瀏覽器相容的字首
    cssnano = require('gulp-cssnano'),          // css的層級壓縮合並

    jshint = require('gulp-jshint'),           //js檢查 ==> npm install --save-dev jshint gulp-jshint（.jshintrc：https://my.oschina.net/wjj328938669/blog/637433?p=1）
    uglify = require('gulp-uglify'),          //js壓縮
    concat = require('gulp-concat'),          //合併檔案

    imagemin = require('gulp-imagemin'),       //圖片壓縮

    del = require('del');             //清空檔案


var SRC_DIR = './src/';     // 原始檔目錄
var DIST_DIR = './dist/';   // 檔案處理後存放的目錄
var DIST_FILE = DIST_DIR + '**'; // 目標路徑下的所有檔案

var Config = {
    html: {
        src: SRC_DIR + '*.html',
        dist: DIST_DIR
    },
    assets: {
        src: SRC_DIR + 'assets/**/*',            // assets目錄：./src/assets
        dist: DIST_DIR + 'assets'                // assets檔案build後存放的目錄：./dist/assets
    },
    css: {
        src: SRC_DIR + 'css/**/*.css',           // CSS目錄：./src/css/
        dist: DIST_DIR + 'css'                   // CSS檔案build後存放的目錄：./dist/css
    },
    sass: {
        src: SRC_DIR + 'scss/**/*.scss',         // SCSS目錄：./src/scss/
        dist: DIST_DIR + 'css'                   // SCSS檔案生成CSS後存放的目錄：./dist/css
    },
    js: {
        src: SRC_DIR + 'js/**/*.js',             // JS目錄：./src/js/
        dist: DIST_DIR + 'js',                   // JS檔案build後存放的目錄：./dist/js
        build_name: 'build.js'                   // 合併後的js的檔名
    },
    img: {
        src: SRC_DIR + 'images/**/*',            // images目錄：./src/images/
        dist: DIST_DIR + 'images'                // images檔案build後存放的目錄：./dist/images
    }
};

/**
 * copy任務（複製不需要處理的檔案到dist目錄下）
 */
/*var copyTasks = [
    'html', 'assets'
]; // 定義單純的複製功能的列表
gulp.task('copy', function () {
    for (var i = 0; i < copyTasks.length; i++) {
        var key = copyTasks[i];
        gulp.src(Config[key].src)
            .pipe(gulp.dest(Config[key].dist));
        //.pipe(notify({ message: key + ' task complete' }));
    }
});*/

/**
 * HTML處理
 */
gulp.task('html', function () {
    gulp.src(Config.html.src)
        .pipe(gulp.dest(Config.html.dist));
});

/**
 * assets資料夾下的所有檔案處理
 */
gulp.task('assets', function () {
    gulp.src(Config.assets.src)
        .pipe(gulp.dest(Config.assets.dist));
});

/**
 * CSS樣式處理
 */
gulp.task('css', function () {
    gulp.src(Config.css.src)
        .pipe(autoprefixer('last 2 version'))
        .pipe(gulp.dest(Config.css.dist))
        .pipe(rename({suffix: '.min'}))
        .pipe(cssnano()) //執行壓縮
        .pipe(gulp.dest(Config.css.dist))
        .pipe(notify({message: 'css task complete'}));
});
/**
 * 監聽CSS檔案的變化，變化後將執行CSS任務
 */
gulp.task('css-watch', function () {
    gulp.watch(Config.css.src, ['css']);
});

/**
 * SCSS樣式處理
 */
gulp.task('sass', function () {
    return gulp.src(Config.sass.src)
        .pipe(autoprefixer('last 2 version'))
        .pipe(sass())
        .pipe(gulp.dest(Config.sass.dist))
        .pipe(rename({suffix: '.min'})) //rename壓縮後的檔名
        .pipe(cssnano()) //執行壓縮
        .pipe(gulp.dest(Config.sass.dist))
        .pipe(notify({message: 'sass task complete'}));
});
/**
 * 監聽SASS檔案的變化，變化後將執行SASS任務
 */
gulp.task('sass-watch', function () {
    gulp.watch(Config.sass.src, ['sass']);
});

/**
 * js處理
 */
gulp.task('js', function () {
    gulp.src(Config.js.src)
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(gulp.dest(Config.js.dist))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest(Config.js.dist))
        .pipe(notify({message: 'js task complete'}));
});
/**
 * 合併所有js檔案並做壓縮處理
 */
gulp.task('js-concat', function () {
    gulp.src(Config.js.src)
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(concat(Config.js.build_name))
        .pipe(gulp.dest(Config.js.dist))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest(Config.js.dist))
        .pipe(notify({message: 'js-concat task complete'}));
});

/**
 * 圖片處理
 */
gulp.task('images', function () {
    return gulp.src(Config.img.src)
        .pipe(imagemin({optimizationLevel: 3, progressive: true, interlaced: true}))
        .pipe(gulp.dest(Config.img.dist))
        /*.pipe(notify({ message: 'images task complete' }))*/;
});

/**
 * 清空圖片、樣式、js
 */
gulp.task('clean', function () {
    return del([Config.html.dist, Config.css.dist, Config.js.dist, Config.img.dist]);
});
gulp.task('clean-all', function () {
    return del([Config.html.dist, Config.assets, Config.css.dist, Config.js.dist, Config.img.dist]);
});

/**
 * 預設任務 清空圖片、樣式、js並重建 執行語句 gulp
 */
gulp.task('default', ['clean'], function () {
    gulp.start('html', 'assets', 'css', 'images', 'js');
});


/**
 * 監聽任務
 */
gulp.task('watch', function () {
    // Watch .html files
    gulp.watch(Config.html.src, ['html']);

    // Watch .css files
    gulp.watch(Config.css.src, ['css']);

    // Watch .scss files
    gulp.watch(Config.sass.src, ['sass']);

    // Watch assets files
    gulp.watch(Config.assets.src, ['assets']);

    // Watch .js files
    gulp.watch(Config.js.src, ['js']);

    // Watch image files
    gulp.watch(Config.img.src, ['images']);

    // Create LiveReload server
    livereload.listen();

    // Watch any files in dist/, reload on change
    gulp.watch([DIST_FILE]).on('change', livereload.changed);
});

專案目錄參考結構如下：

從上面的目錄結果可以看到，除了有package.json和gulp配置檔案gulpfile.js外，還有一個 .jshintrc 檔案。這個是外掛 gulp-jshint 校驗js使用的。（網上找了一份，參考地址見gulpfile.js中的註釋部分）

.jshintrc如下：

{

  "es5": true,    
  "node": true,

  "bitwise": false,

  "camelcase": false,

  "curly": false,

  "eqeqeq": false,

  "forin": true,

  "strict": false,

  "freeze": true,

  "immed": true,

  "indent": 4,

  "latedef": true,

  "newcap": true,

  "noarg": true,

  "noempty": false,

  "nonbsp": true,

  "nonew": true,

  "plusplus": false,

  "undef": true,

  "trailing": true,

  "debug": false,

  "funcscope": true,

  "laxcomma": false,

  "loopfunc": true,

  "onevar": false,

  "unused": true

}

使用cmd命令進入當前專案目錄，使用gulp watch 即可啟動gulp監聽專案檔案，檔案修改時，對應gulp任務就會被觸發並執行。

使用gulp-livereload外掛可以實現檔案修改時瀏覽器的自動重新整理，需要在伺服器環境下，推薦使用通過npm安裝http-server，快速建立http服務。

參考如下：

LiveReload配置

npm install http-server -g

3、通過cd找到釋出環境目錄dist
4、執行http-server，預設埠是8080
5、訪問路徑localhost:8080
6、再開啟一個cmd，通過cd找到專案路徑執行gulp，清空釋出環境並初始化
7、執行監控 gulp
8、點選chrome上的LiveReload外掛，空心變成實心即關聯上，你可以修改css、js、html即時會顯示到頁面中。

一份gulp的配置檔案

LiveReload配置

寫一份gulp常用配置檔案，構建前端工作流

一份gulp的配置檔案

聊一聊log4j2配置檔案log4j2.xml

記一次SpringBoot 配置檔案未生效和war包執行失敗one or more listener(filter)。。。

記一次Webpack配置檔案的分離

Mybatis學習總結一之MyBatis配置檔案中的配置及其優化

一次webapck4 配置檔案無效的解決歷程

Android 7.0 init.rc 執行shell指令碼 ---- 製作一初始化配置檔案

Spring Boot 基礎（一） YAML配置檔案詳解

官網常用 gulp配置檔案

簡單的一份vim配置

一份MyBatis-Generator非常詳細的配置檔案

如何編寫一份優雅的Spring配置檔案

三大框架（ssh）學習——配置檔案詳解（一)

專案中常用的讀取配置檔案的方式（一）

SNMP原始碼分析之（一）配置檔案部分

一步步完善rootfs：2.建立配置檔案

Redis配置檔案 redis.conf 解讀（一）

一文詳解matplotlib的配置檔案以及配置方式

gulp配置自動重新整理瀏覽器壓縮js和css檔案和圖片

一份gulp的配置檔案

LiveReload配置

相關推薦