Gulp自動化のプロジェクト構築ツール

多くの場合、フロントエンドとnodeエンジニアからプロジェクトの自動化を実現するためにGrountを勧められます.自動化はJavascript/coffee/sass/lessなどのファイルのテスト、チェック、合併、圧縮、フォーマット、配置ファイルの生成を自動的に行います.ファイルは変更後に指定されたこれらのステップを繰り返します.
Grauntのおかげで、ミッションの設計モードに基づいて、これらのステップはとても良い分類で実行できます.開発効率を一回向上させましたが、1000敵を殺して、800を損します.曲線を学ぶのは少し高いです.
Gunt.jsは複雑すぎて、Vimの使用や配置よりも複雑で、以前に「フロントエンド自動化はどのようにgrunt最適化プロジェクトを利用しますか？」と書いたことがあります.glupは簡単で、構成ロジックは分かりやすく、効率も高く、丈夫性もいいです.
Gulp構築システム
Gulpはシステムを構築するもので、開発者はウェブサイトの開発過程で自動的に一般的なタスクを実行することができます.
たとえば、前処理CSSをコンパイルしたり、JavaScriptを圧縮したり、ブラウザを更新したりして、ウェブサイトの開発過程を改善します.　　
公式サイト:http://gulpjs.com/プラグイン:http://gulpjs.com/plugins/またはhttp://npm.taobao.org/
一、Gulp取付
1.GulpはNode.jsに基づいて構築されるので、先にnode.jsをインストールします.
2.Gulpを取り付ける過程はとても簡単です.まず、グローバルにGulpパッケージをインストールする必要があります.

npm install -g gulp  //    

3.そして、プロジェクトディレクトリにGulpをインストールする:

npm install --save-dev gulp

4.gulpがインストールされているかを確認する

gulp -v

二、一般的なgulpプラグインをインストールする

* sass   （gulp-ruby-sass）
*     css  （gulp-autoprefixer）
*   css（gulp-minify-css）
* js    （gulp-jshint）
*   js  （gulp-concat）
*   js  （gulp-uglify）
*     （gulp-imagemin）
*       （gulp-livereload）
*     ，          （gulp-cache）
*     （gulp-notify）
*     （del）

三、プロファイルgulpfile.jsを作成する
プロジェクトのルートディレクトリにプロファイルを作成します.  gulpfile.js、Glpは5つの方法だけであなたが必要とするタスクフローを組み合わせることができます.

//    js/app.js：        。
//    js/*.js：          js   。
//    js/**/*.js：                   js   。
//    !js/app.js：  js/app.js       。
//    *.+(js|css)：        ，      js css   。


//  gulp  node  
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    //gminifycss = require('gulp-minify-css'),
    compass = require("gulp-compass"),
    jshint = require('gulp-jshint'),
    sourcemaps = require('gulp-sourcemaps'),
    minicss = require('gulp-mini-css'),
    connect = require('gulp-connect'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    concat = require('gulp-concat'),
    livereload = require('gulp-livereload'),
    notify = require('gulp-notify');

//Gulp    5                 ：task, run, watch, src, dest

    //   web  ,      http-server
    gulp.task('http-server', function() {
        connect.server({
            livereload: true
        });
    });
    
    //gulp.task(name, fn)gulp   task  ，         。           ，          。
    gulp.task('uglify',function(){
    
        //gulp.src(glob)        stream，      ./js/*.js    
        gulp.src('./js/*.js')
            .pipe(uglify())
             //gulp.dest(glob)       stream，            ./dist/js                    
            .pipe(gulp.dest('./dist/js'))
            .pipe(notify({message:'    ok !'}))
    })
    
    //    
    gulp.task('mincss',function(){
        gulp.src('./css/*.css')
            .pipe(mincss())
            .pipe(gulp.dest('./dist/js'))
    })
    
    //   Compass  
    gulp.task('compass', function() {
        gulp.src('./scss/**')
            .pipe(compass({
                comments: false,
                css: 'css',
                sass: 'scss',
                image: 'img'
            }));
    });    
    
    //  sass
    gulp.task("sass",function(){
        gulp.src('./scss/.scss')
            .pipe(sourcemaps.init())
            .pipe(sass())
            .pipe(mincss())
            .pipe(sourcemaps.write('/'))
            .pipe(gulp.dest('./css/*.css'))
    })
    
    //  js
    gulp.task("jshint",function(){
        gulp.src("./js/.js")
            .pipe(jshint())
            .pipe(jshint.reporter('default')); //         
    })
    
    //   、    
    gulp.task('scripts', function() {
        gulp.src('./js/*.js')
            .pipe(concat('all.js'))
            .pipe(gulp.dest('./dist/js'))
            .pipe(rename('all.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js'))
            .pipe(livereload())
    });    
    
    //    
    gulp.task('imagemin',function(){
        gulp.src('./image/*.*')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist/image'))
            .pipe(notify({message:'compress ok !'}))
    })
    
    //   HTML     
    gulp.task("html",function(){
        gulp.src('*.*')
            .pipe(livereload());        
    })
    
    //    "watch"   
    gulp.task('watch',function(){
        gulp.watch('./image/*.*');
        gulp.watch('./js/*.js');
        gulp.watch('./css/*.css');
        gulp.watch('./scss/*.scss');
    })    
    //  gulpfile.js       dafault  ，        （  C   main()  ），  gulp            （          ）
    gulp.task('default',function(){
         //gulp.run(tasks)         ，       
        gulp.run('uglify','imagemin','compass');
        //  'watch'    
        gulp.run('watch');    
        //       
        gulp.watch([
            '*.*',
            './scss/**', 
            './img/**',
            './js/*.js'], function() {
            livereload.listen();
            gulp.run('compass', 'lint', 'html', 'sass','imagemin','scripts');
        });        
    })

 
四、運行gulp
gulp+ジョブ名から、gulp例を実行できます.

gulp watch

 
参考資料:Glp.js参考マニュアル、自動化構築ツール
Guntを置いて、グルプをします。
Gulp先端自動化ツール
Gulp：タスク自動管理ツール
yeoman自動化処理