フロントエンド構築ツールGulpの使用概要

目次

why

環境構築

gulp

gulpfile.jsファイル解析

開発導入プロセス

1.why

キャッシュの自動クリア、自動リフレッシュ、開発デバッグプロセスの加速browserSync or browserSync国内

jsコード圧縮、帯域幅節約.

cssファイル、hashコードを入れて、テストしやすい.(既知の場合、js修正はキャッシュ不要、cssファイル必要)

2.環境構築

Windows環境nodeインストール、このチュートリアルを参照することができて、Linuxシステムは参照することができて、チュートリアルの1、チュートリアルの2
注意事項
nodeのダウンロード速度が遅すぎる場合は、国内のnodeダウンロードステーションを使用することも考えられます.

3.gulp

中国語公式サイト
入門ガイド

グローバルインストールgulp:

$ npm install --global gulp

プロジェクトとしての開発依存(devDependencies)インストール:

$ npm install --save-dev gulp

プロジェクトルートディレクトリの下にgulpfileという名前を作成する.jsのファイル:

var gulp = require('gulp');
gulp.task('default', function() {
  //              
});

gulp運転:

$ gulp

4.gulpfile.jsファイル解析

let gulp = require('gulp'),

    // html  
    htmlmin = require('gulp-htmlmin'), //   html  

    // css  
    cleanCss = require('gulp-clean-css'),  //   css

    // js  
    uglify = require('gulp-uglify'),  //   js
    babel = require('gulp-babel'),    // es6  
    eslint = require('gulp-eslint'),  //     

    //         
    changed = require('gulp-changed'),

    //          
    plumber = require('gulp-plumber'),

    //   
    debug = require('gulp-debug'), //     pipe    

    //       
    chalk = require('chalk'),
    log = console.log,   //   

    //     
    del = require('del'), //        

    //       
    runSequence = require('gulp-sequence'), //     

    //    
    browserSync = require('browser-sync').create(), // -     

    // pipe   if    
    gulpif = require('gulp-if'),

    //       
    minimist = require('minimist'),

    // css     
    rev = require('gulp-rev'),  //   MD5  
    revCollector = require('gulp-rev-collector');  //     
    
// Environment setup     
/*
 * env----      
 *   gulp       
 * gulp----      （gulp --env 0）
 *        gulp    
 *
 * gulp --env 0-----  
 *
 *   gulp       gulp --env 0
 */


let knownOptions = {
    string: 'env',
    default: {env: process.env.NODE_ENV || '0'}
};

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


//web       
let host = {
    path: 'src/main/app/',   //            
    build: 'src/main/webapp/',  //       
};

gulp.task('serve', () => {
    browserSync.init({
        proxy: 'http://192.168.0.103:8080',
        serveStatic: [host.path],
        browser: ['chrome'],
        files: [
            `${host.path}**/*.html`,
            `${host.path}**/*.css`,
            `${host.path}**/*.js`,
            `${host.path}img/!**/!*.*`
        ],
    });
});

//     
gulp.task('lint', () => {
    return gulp.src([host.path + 'js/**/*.js'])
        .pipe(eslint({
            configFile: '.eslintrc.js',
        }))
        .pipe(eslint.formatEach())
        .pipe(eslint.results(results => {
            log(chalk.gray(`Total Files: ${results.length}`));
            log(chalk.redBright(`Total Errors: ${results.errorCount}`));
            log(chalk.yellow(`Total Warnings: ${results.warningCount}`));
        }))
});

//     
const isFixed = (file) => {
    return file.eslint !== null && file.eslint.fixed;
};

gulp.task('lint-fix', () => {
    return gulp.src([host.path + 'js/**/*.js'])
        .pipe(eslint({
            fix: true,
        }))
        .pipe(gulpif(isFixed, gulp.dest(host.path + 'js')));
});

//   html
let htmlOptions = {
    removeComments: true,   //     
    collapseWhitespace: true,  //   html
    removeEmptyAttributes: false, //             ==> 
    removeScriptTypeAttributes: false, //    type="text/javascript"
    minifyJS: true, //     JS
    minifyCSS: true, //     css
};

gulp.task('html', () => {
    return gulp.src(host.path + '**/*.html')
        .pipe(plumber())
        .pipe(changed(host.build))
        .pipe(debug({title: '  ：'}))
        .pipe(htmlmin(htmlOptions))
        .pipe(gulp.dest(host.build))
});

//   css +      
gulp.task('mincss', () => {
    return gulp.src(host.path + 'css/*.*')
        .pipe(plumber())
        .pipe(debug({title: '  ：'}))
        .pipe(cleanCss())   //-        
        .pipe(rev())    //-     MD5  
        .pipe(gulp.dest(host.build + 'css'))  //-       
        .pipe(rev.manifest())   //-     rev-manifest.json
        .pipe(gulp.dest(host.build + 'css'));  //-   rev-manifest.json     rev    
});
//   css  
gulp.task('revcss', () => {
    return gulp.src([host.build + 'css/*.json', host.build + '**/*.html']) //-    rev-manifest.json         css      
        .pipe(revCollector())   //-      css    
        .pipe(gulp.dest(host.build));  //-            
});
gulp.task('css', (cb) => runSequence(['mincss'], ['revcss'])(cb));

// js  
gulp.task('babel', () => {
    return gulp.src(host.path + '**/*.js')
        .pipe(plumber())
        .pipe(changed(host.build + 'js'))
        .pipe(debug({title: '  ：'}))
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest(host.build + 'js'))
});

// js  
gulp.task('js', () => {
    return gulp.src(host.path + 'js/**/*.js')
        .pipe(plumber())
        .pipe(changed(host.build + 'js'))
        .pipe(debug({title: '  ：'}))
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(host.build + 'js'))
});

// configjs    
gulp.task('configjs', () => {
    return gulp.src(host.path + 'config.js')
        .pipe(plumber())
        .pipe(changed(host.build))
        .pipe(debug({title: '  ：'}))
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(host.build))
});

gulp.task('pageJs', (cb) => runSequence(['js'], ['configjs'])(cb));

// static     
gulp.task('static', function () {
    return gulp.src(host.path + 'static/**/*')
        .pipe(plumber())
        .pipe(changed(host.build + 'static'))
        .pipe(debug({title: '  ：'}))
        .pipe(gulp.dest(host.build + 'static'))
});

//       
gulp.task('img', () => {
    return gulp.src(host.path + 'img/**/*')
        .pipe(plumber())
        .pipe(changed(host.build))
        .pipe(gulp.dest(host.build + 'img'))
});

// json  
gulp.task('json', () => {
    return gulp.src(host.path + '**/*.json')
        .pipe(changed(host.build))
        .pipe(debug({title: '  ：'}))
        .pipe(gulp.dest(host.build))
});

//     
gulp.task('other', () => {
    return gulp.src([host.path + '*.html', host.path + '*.js'])
        .pipe(plumber())
        .pipe(changed(host.build))
        .pipe(debug({title: '  ：'}))
        .pipe(gulp.dest(host.build))
});

//     
gulp.task('clean', () => {
    del(host.build + '/css');
    del(host.build + '/js');
    del(host.build + '/pages');
    del(host.build + '/static');
    del(host.build + '/img');
    del(host.build + '/index.html');
    del(host.build + '/login.html');
    del(host.build + '/config.js');
    del(host.build + '/*.json');
});

//   
gulp.task('build', (cb) => runSequence(
    ['html'], ['css'], ['pageJs'], ['static'], ['img'],['json'],['other']
)(cb));

gulp.task('default', ['serve']);

/*    */
gulp.task('h', () => {
    log(chalk.yellow(''));
    log(chalk.yellow('         ：           gulp     gulp --env 0'));
    log(chalk.yellow('         ：           gulp clean'));
    log(chalk.yellow('       js  ：         gulp lint'));
    log(chalk.yellow('          js  ：   gulp lint-fix'));
    log(chalk.yellow(''));
});

</code></pre> 
 <h2>5.      </h2> 
 <p>   package.json gulpfile.js   。  </p> 
 <pre><code>npm install 
</code></pre> 
 <h5>    </h5> 
 <p>   npm install      ，   cnpm，（cnpm    ，  Google）。</p> 
 <h5>  ：</h5> 
 <p>        app    ，build         。</p> 
 <pre><code>gulp // gulp default
</code></pre> 
 <h5>  ：</h5> 
 <pre><code>gulp clean

gulp build
</code></pre> 
 <p>            ，        。</p> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1274665598214750208"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">