gulpベースのフロントエンド自動学習記録

前に書く

個人学習記録は、配置が間違っている可能性がありますので、ご教示ください.

インストールgulp

まずグローバルインストール:

    $npm install gulp -g

指定したディレクトリの下にgulpをインストールして開発依存として併存する

    $npm install gulp --save-dev

挿入の説明:--saveと--save-dev--saveは実行依存として保存されます(アプリケーションの起動に必要です)--save-devは開発依存として保存されます(ソースコードの変更に必要です).

gulp初期化

ディレクトリにgulpfileを作成する.jsのファイル保存gulpの構成説明:

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

gulpイベントの説明

    gulp.src('src/**/*.js') 
    //    src   （      ）   js  
    （'src/*.js'）         
    .pipe(some require) //           
    .pipe(gulp.dest('publice/js'))//         
    gulp.watch('src/*.js',['//some task'])//watch      ，       task            

gulpは非同期呼び出しを構成したり、promiseオブジェクトを宣言したりすることもできますが、個人的な感覚では一般的には使用できません.必要に応じてドキュメントを表示できます.gulp中国語api

gulp構成例

まずgulpベースのプラグイン名と説明がよく使われるかもしれません

css 3接頭辞LessPluginAutoPrefix=require(「less-plugin-autoprefix」)にgulpバージョン

が自動的に追加されます.

Browsersyncブラウザの表示効果を同時に行うテストツール

gulp-concat jsファイル接合npm install gulp-concat--save-dev

gulp-uglify jsファイル圧縮npm install gulp-uglify--save-dev

gulp-clean-css cssファイル圧縮npm install gulp-clean-css--save-dev

gulp-changed修繕されたファイルのみをコンパイルnpm install gulp-changed--save-dev

gulp-babel es 6回転es 5 react jsx変換npm install gulp-babel babel-preset-es 2015--save-dev

gulp-plumberエラー詳細npm install gulp-plumber--save-dev

gulp-util雑用コンポーネントライブラリnpm install gulp-util--save-dev

gulp-sourcemapsは、複雑な相互参照をコンパイルするために地図に依存するless(bootstrapなど)、js(各種nodeモジュールなど)などのファイルを生成するnpm install gulp-sourcemaps--save-dev

Lessコンパイルと圧縮の設定

Lessコンパイルインストールgulp-less

$ npm install gulp-less --save-dev

less自動コンパイルの構成

    var gulp=require('gulp');
    var less=require('gulp-less');
    gulp.task('less',function(){
        return gulp.src('less/*.less')
            .pipe(less())  //READE.ME      ，                
            .pipe(gulp.dest('publice/css/'));
        });
    gulp.task('lessWatch',function(){
             gulp.watch('less/*.less',['less']);//  less             less    （       ）
        });
   
    gulp.task('default',['lessWatch'])//    less    

以上が最も簡単なgulp-lessベースのless自動コンパイル構成です.次に、gulp-clean-cssベースのgulp-clean-cssを圧縮しながらコンパイルする方法を見てみましょう.

$ npm install gulp-clean-css

上記のプロファイルにgulp-clean-cssを加えて単独で使用する場合はREADMEドキュメントを参照してください

    var gulp=require('gulp');
    var less=require('gulp-less');
    var cleanCSS=require('gulp-clean-css');
    gulp.task('less',function(){
        return gulp.src('Less/*.less')
            .pipe(less())  //READE.ME      ，                
            .pipe(cleanCSS()) //     
            .pipe(gulp.dest('Publice/css/'));
        });
    gulp.task('lessWatch',function(){
             gulp.watch('Less/*.less',['less']);//  less             less    （       ）
        });
   
    gulp.task('default',['lessWatch'])//    less    

gulp基本構成このように、複雑な参照をコンパイルできるlessを添付し、エラーを報告してエラー情報を出力できるgulp構成例を添付します.

var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css'); //       gulp-minify-css
var sourcemaps = require('gulp-sourcemaps'); //      
var plumber = require('gulp-plumber'); //    
var gutil = require('gulp-util'); //     
function errHandler( e ){
    gutil.log(e.toString());
} //             

gulp.task('less', function() {
     gulp.src('Less/*.less')
        .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(plumber( {errorHandler: errHandler}))
            .pipe(less())
            .pipe(cleanCSS()) //           
        .pipe(sourcemaps.write('mpas'))
        .pipe(gulp.dest('Publice/css'));
});
gulp.task('watch',function(){
    gulp.watch('Less/*.less', ['less']);
});
gulp.task('default', ['watch']);

ES 6はES 5を回転させ、混同された構成を圧縮する。

原理と論理はLESSとあまり変わらないまずインストール

$ npm install gulp-babel babel-preset-es2015 --save-dev 

そして構成

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps'); //      
var plumber = require('gulp-plumber'); //    
var gutil = require('gulp-util'); //     
var babel=require('gulp-babel'); //es6 es5
var uglify = require('gulp-uglify'); //js  

function errHandler( e ){
    gutil.log(e.toString());
} //      

gulp.task('es5change',function(){
    gulp.src('es6/*.js')
        .pipe(sourcemaps.init({loadMaps:true}))
            .pipe(plumber({errorHandler:errHandler}))
            .pipe(babel({
            presets: ['es2015']
            }))
            .pipe(uglify())
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest('Publice/js'));
});

gulp.task('watch',function(){
    gulp.watch('es6/*.js', ['es5change']);
});

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

最後にLessとES 6回転ES 5の完全な構成項目を添付します.

var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css'); //       gulp-minify-css
var sourcemaps = require('gulp-sourcemaps'); //      
var plumber = require('gulp-plumber'); //    
var gutil = require('gulp-util'); //     
var babel=require('gulp-babel'); //es6 es5
var uglify = require('gulp-uglify'); //js  

function errHandler( e ){
    gutil.log(e.toString());
}

gulp.task('es5change',function(){
    gulp.src('es6/*.js')
        .pipe(sourcemaps.init({loadMaps:true}))
            .pipe(plumber({errorHandler:errHandler}))
            .pipe(babel({
            presets: ['es2015']
            }))
            .pipe(uglify())
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest('Publice/js'));
});

gulp.task('less', function() {
    "use strict";
     gulp.src('Less/*.less')
        .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(plumber( {errorHandler: errHandler}))
            .pipe(less())
            .pipe(cleanCSS()) //           
        .pipe(sourcemaps.write('mpas'))
        .pipe(gulp.dest('Publice/css'));
});

gulp.task('watch',function(){
    gulp.watch('Less/*.less', ['less']);
    gulp.watch('es6/*.js', ['es5change']);
});


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