Gulp学習--圧縮js,css,img

gulpはnodeに基づいてWebフロントエンドの自動化開発を実現するツールであり,彼を利用して開発効率を極めて向上させることができる.gulpはnodeに基づいているので、開始前にネイティブがnodeをインストールしていることを確認する必要があります.
インストールgulp npm install gulpインストールjs圧縮モジュール–gulp-uglify node install gulp-uglifyインストールcss圧縮モジュール–gulp-minify-css node install gulp-minify-cssインストールimg圧縮モジュール–gulp-imagemin node install gulp-imagemin/*注記インストールに失敗した場合はsudoコマンドでインストール*/
gulp法則1.js/,css/,img/ディレクトリの下にあるすべてのファイルを見つけます.これらのファイルを圧縮する.圧縮されたファイルを対応するディレクトリに保存
gulpコードgulpを記述するすべての構成コードはgulpfileに書かれている.jsファイル
圧縮jsファイルを例一としてgulpfileを新規作成する.jsファイル2、gulpfile.jsでコードを書く

var gulp = require('gulp')

三gulp-uglifyコンポーネントの取得

var uglify = require('gulp-uglify')

四、圧縮タスクの作成

gulp.task('script',function(){ //gulp.task(name,fn) -    ，         ，          
    //1.    
    gulp.src('js/*.js')  //gulp.src(path)     ，       
    //2.    
        .pipe(uglify())  //gulp.pipe()  ，             
    //3.         
        .pipe(gulp.dest('dist/js')) //gulp.dest(path)     
})

五、検出コード修正自動実行タスクはgulpを使用することができる.watch(src,fn)は、指定されたディレクトリの下のファイルの変更を検出してタスクを実行する.

gulp.task('auto',function(){
    gulp.watch('js/*.js',['script'])
})

六、gulpを使用する.task(‘default’,fn)デフォルトタスクの定義

gulp.task('default',['script','auto']);

この場合、gulp+をコマンドラインに直接入力して車に戻り、scriptとautoタスクを実行できます.
最終コードは次のとおりです.

//    gulp
var gulp = require('gulp')

//    uglify   （     JS）
var uglify = require('gulp-uglify')

//    js   
//        gulp script      
gulp.task('script', function() {
    // 1.     
    gulp.src('js/*.js')
    // 2.     
        .pipe(uglify())
    // 3.         
        .pipe(gulp.dest('dist/js'))
})

//        gulp auto      
gulp.task('auto', function () {
    //       ，          script   
    gulp.watch('js/*.js', ['script'])
})

//    gulp.task('default')       
//        gulp    script     auto   
gulp.task('default', ['script', 'auto'])

完全圧縮js,css,imgコード

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');

gulp.task('script',function(){
    gulp.src("src/js/*.js")
        .pipe(uglify())
        .pipe(gulp.dest("dist/js"))
});

gulp.task('css',function(){
    gulp.src('src/css/*.css')
        .pipe(minifyCSS())
        .pipe(gulp.dest("dist/css"))
});

gulp.task('images',function(){
    gulp.src('src/img/*.*')
        .pipe(imagemin({
            progressive:true
        }))
        .pipe(gulp.dest('dist/img'))
});

gulp.task('auto',function(){
    gulp.watch('src/js/*.js',['script']);
    gulp.watch('src/css/*.css',['css']);
    gulp.watch('src/img/*.*',['images'])
})

gulp.task('default',['script', 'css', 'images', 'auto']);