基於gulp的項目搭建

基於gulp的項目搭建

gulp簡介

gulp 是基於 node 實現 Web 前端自動化開發的工具，利用它可以極大的提升開發效率。

在 Web 前端開發工做中有不少「重複工做」，好比壓縮CSS/JS文件。而這些工做都是有規律的。找到這些規律，並編寫 gulp 配置代碼,讓 gulp 自動執行這些「重複工做」。

下面的配置文件提供了基於 browserSync 的代碼實時預覽功能，開發過層中可自動刷新

項目結構

└── project
    ├── static                     -- html
    ├── images                     -- js/css/img...  項目須要全部資源放在images文件夾下
    ├── preview                    -- 項目預覽目錄
    ├── build                      -- 項目發佈目錄
    ├── gulpfile.js                -- gulp任務配置
    └── config.json                -- 項目配置文件

gulp配置

引入依賴

gulp插件列表

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(), //瀏覽器同步測試
    reload = browserSync.reload,
    watch = require('gulp-watch'),  //文件監控
    uglify = require('gulp-uglify'),    //壓縮js
    concat = require('gulp-concat'),    //合併文件
    jshint = require('gulp-jshint'),    //js檢查
    csslint = require('gulp-csslint'),  //css檢查
    csso = require('gulp-csso'),    //css壓縮
    prefixer = require('gulp-autoprefixer'),
    clean = require('gulp-clean'),  //文件清理
    rename = require("gulp-rename"),    //文件名操做
    zip = require('gulp-zip'),  //壓縮
    imagemin = require('gulp-imagemin'),    //圖片壓縮
    template = require('gulp-template'),    //模版替換
    processhtml = require('gulp-processhtml'),  //引用替換
    gulpif = require('gulp-if'),    //變量判斷
    minimist = require('minimist'), //命令行參數
    fileinclude = require('gulp-file-include'), //html引用
    shell = require('gulp-shell'),  //執行腳本

    config = require('./config.json');  //配置文件

配置命令行參數

// 環境變量參數 
    var knownOptions = {
        string: 'env',
        default: {
            env: 'dev'
        }
    };

    // 文件名參數
    var filetask = {
        string: 'file',
        default: {
            file: 'all'
        }
    };

    // --env dev
    // --env pro

    var options = minimist(process.argv.slice(2), knownOptions, filetask);

js任務

// ----- js -----
    gulp.task('jstask', function() {
        if (!options.file) {
            console.log('檢查所有js文件');
            console.log('運行gulp jstask --file 文件名，查看對應文件錯誤信息');
            return gulp.src('./images/*.js')
                // js檢查
                .pipe(jshint())
                .pipe(jshint.reporter('fail'));
        } else {
            console.log('檢查js文件: ./images/' + options.file);
            return gulp.src('./images/' + options.file)
                // js檢查
                .pipe(jshint())
                .pipe(jshint.reporter('default'));
        }
    });

    // js壓縮發佈
    gulp.task('jstask-min', ['jstask'], function() {
        return gulp.src('./build/*.js')
            // 合併js
            .pipe(concat('main.min.js'))
            // 壓縮js
            .pipe(uglify())
            .pipe(gulp.dest('./build'));
    });

css任務

// ----- css -----
    gulp.task('csstask', function() {
        if (!options.file) {
            console.log('檢查所有css');
            console.log('運行gulp csstask --file 文件名，查看對應文件錯誤信息');
            return gulp.src('./images/*.css')
                // css檢查
                .pipe(csslint())
                .pipe(csslint.reporter('fail'));

        } else {
            console.log('檢查css文件: ./images/' + options.file);
            return gulp.src('./images/' + options.file)
                // css檢查
                .pipe(csslint())
                .pipe(csslint.reporter());
        }
    });

    // css壓縮發佈
    gulp.task('csstask-min', ['csstask'], function() {
        return gulp.src('./build/*.css')
            //壓縮css 
            .pipe(csso())
            .pipe(gulp.dest('./build/'));
    });

html任務

// ----- html 內容替換 -----

    //遷移public文件夾 
    gulp.task('public', function() {
        return gulp.src('./static/public/*')
            .pipe(gulp.dest('./preview/public'));
    });

    gulp.task('contenttask', ['public'], function() {
        console.log('打包環境: ' + options.env);
        return gulp.src('./template/**/*.{html,shtml}')
        
        // 替換內容
        // 使用<%=變量名%>做爲變量
        .pipe(gulpif(options.env === 'dev', template(config.dev_template, {
                'interpolate': /<%=([\s\S]+?)%>/g
            })))
            .pipe(gulpif(options.env === 'pro', template(config.pro_template, {
                'interpolate': /<%=([\s\S]+?)%>/g
            })))
            // 替換引用
            .pipe(processhtml())
            .pipe(gulp.dest('./build'))

        // 生產以站點id爲文件名的.site文件
        .pipe(gulpif(options.env === 'dev', shell(['touch <%= siteId %>.site'], {
                templateData: {
                    siteId: config.testSiteId
                }
            })))
            .pipe(gulpif(options.env === 'pro', shell(['touch <%= siteId %>.site'], {
                templateData: {
                    siteId: config.proSiteId
                }
            })));
    });

    gulp.task('contenttask-preview', ['public'], function() {
        return gulp.src('./static/**/*.{html,shtml}')
            // 替換內容
            .pipe(template(config.preview_template))
            // 替換引用
            .pipe(processhtml())
            .pipe(fileinclude({
                prefix: '@@',
                basepath: '@file'
            }))
            .pipe(gulp.dest('./preview'));
    });

    gulp.task('contenttask-watch', ['public'], function() {
        return gulp.src('./static/**/*.{html,shtml}')
            .pipe(watch('./static/**/*.{html,shtml}')) // 只從新編譯被更改過的文件
            // 替換內容
            .pipe(template(config.debug_template))
            // 替換引用
            .pipe(processhtml())
            .pipe(fileinclude({
                prefix: '@@',
                basepath: '@file'
            }))
            .pipe(gulp.dest('./preview'));
    });

文件操做

// ----- 文件操做 ----- 

    // 文件清理
    gulp.task('clean', function() {
        return gulp.src(['./build', './preview', './*.site'], {
                read: false
            })
            .pipe(clean({
                force: true
            }));
    });

    gulp.task('clean-build', function() {
        return gulp.src(['./build'], {
                read: false
            })
            .pipe(clean({
                force: true
            }));
    });

    gulp.task('clean-preview', function() {
        return gulp.src(['./preview'], {
                read: false
            })
            .pipe(clean({
                force: true
            }));
    });

圖片壓縮

// ----- 壓縮圖片 ----- 

    //壓縮圖片 - imagemin
    gulp.task('imagemin', function() {
        return gulp.src('./images/*.{png,jpg,jpeg,gif}')
            .pipe(imagemin({
                progressive: true,
                svgoPlugins: [{
                    removeViewBox: false
                }],
                use: [pngquant({
                    quality: '100'
                })]
            }))
            .pipe(gulp.dest('./images'));
    });

本地預覽

// 開啓本地 Web 服務器功能
    gulp.task('webserver-static', function() {
        // 開發預覽
        browserSync.init({
            port: config.serverPort,
            server: {
                baseDir: ["preview", "./"], //根目錄
                directory: true, //是否顯示目錄
                middleware: function(req, res, next) {
                    var fs = require('fs');
                    var ssi = require('ssi'); //支持shtml
                    var baseDir = './preview/';
                    var pathname = require('url').parse(req.url).pathname;
                    var filename = require('path').join(baseDir, pathname.substr(-1) === '/' ? pathname + 'index.shtml' : pathname);
                    var parser = new ssi(baseDir, baseDir, '/**/*.shtml', true);
                    if (filename.indexOf('.shtml') > -1 && fs.existsSync(filename))
                        res.end(parser.parse(filename, fs.readFileSync(filename, {
                            encoding: 'utf8'
                        })).contents);
                    else
                        next();
                }
            }
        });

        // 監聽文件變化刷新頁面
        gulp.watch('./**/*').on("change", browserSync.reload);
    });

配置任務

// ----- 任務 ----- 

    //默認任務
    gulp.task('default', function() {
        gulp.run('help');
    });

    gulp.task('help', function() {
        console.log('gulp build --env dev          ---測試環境模板打包');
        console.log('gulp build --env pro          ---生產環境模板打包');
        console.log('gulp debug                    ---本地調試');
        console.log('gulp jstask                   ---js文件檢查');
        console.log('gulp jstask --file 文件名     ---檢查js文件');
        console.log('gulp csstask                  ---css文件檢查');
        console.log('gulp csstask --file 文件名    ---檢查css文件');
        console.log('gulp imagemin                 ---圖片壓縮');
    });

    //項目完成提交任務
    gulp.task('build', ['clean-build'], function(a) {
        gulp.run('contenttask');
        gulp.run('imagemin');
    });

    // 預覽
    gulp.task('preview', ['clean-preview'], function(a) {
        gulp.run('contenttask-preview');
    });

    // 本地調試
    gulp.task('debug', ['clean-preview'], function(a) {
        gulp.run('contenttask-watch');
        gulp.run('webserver-static');
    });

    //項目完成提交任務
    gulp.task('build-min', ['clean'], function() {
        gulp.run('jstask-min');
        gulp.run('csstask-min');
        gulp.run('contenttask');
        gulp.run('imagemin');
    });