grunt gulp使用

6312 ワード

Graunt/Gulpはすべてnode.jsの下のモジュールで、簡単に言えば自動化の任務の運行器で、両者はすべてコミュニティと大量のプラグインの支持があって、すべての自動化のツールの領域の中で、この両者は最も良い先端の自動化の構築のツールです.Grauntとすべてのgruntプラグインはnodejsに基づいて実行されます.もしあなたのコンピュータにnodejsがないなら、インストールしてください.nodejsをインストールするのはとても簡単で、完全に馬鹿な式、次のステップの下で、のインストールの方式、ここはもう詳しく説明しません.行きますhttps://nodejs.org/で、ページの中の緑、大きな「install」ボタンをクリックすればいいです.nodejsをインストールしたら、あなたのコンソールに「node-v」を入力してnodejsのバージョンを確認してもいいです.また、nodejsのインストールが成功したかどうかをテストします.
【grunt】フロントエンド自動化ツール
公式サイト:gruntjs.com前提:nodejsに基づいて環境のnode-v npm-v nodeを検証します.管理器の新しいnodeバージョンはnpmを持っています.古いのは持っていません.
使用プロセス
1、gruntコマンド環境をインストールする(命令でgruntを実行するには、必ず装着する)
npm install grunt-cli-g-cli作成コマンドライン-gグローバル
2、取り付けの有無を確認する
grunt--version以上でgrunt命令環境がすでに整っていることを証明します.
3、ローカルファイルcdファイル名/ファイル名に入る
gruntには二つのファイルが必要です.package.jsonプロジェクトのプロファイル配置全体の項目状況、プロジェクト名、プロジェクトのバージョン、プロジェクトの著者、プロジェクト依存モジュール(プラグイン)Guntfile.js配置grunt設定プラグインの使用
4、npm init
package.json nameプロジェクト名を作成しました.
5、ローカルgruntをインストールする
npm install grunt--save-dev
6、書類の準備が必要です.
Guntfile.js作成タスク
7、具体的なタスクの作成

module.exports=function(grunt){
    console.log('111')
    }

モジュールの保存方法3つ
a)npm installモジュール名
このモジュールを本プロジェクトディレクトリにインストールします.
b)npm installモジュール名--save
モジュールを本カタログにインストールするだけでなく、package.jsonファイルに書き込み、dependenciesオプションに書き込みます.
c)npm installモジュール名--save-devおすすめの
モジュールを本カタログにインストールするだけでなく、package.jsonファイルに書き込み、devDependenciesオプションに書き込みます.
一般的なプラグインのダウンロード:
プラグイン:http://gruntjs.com/plugins gruntプラグインの分類について:1、gruntチームが自分で開発したcontrib 2、第三者が作成したgrunt常用プラグイン:

    grunt-contrib-watch     

    grunt-contrib-uglify   js

    grunt-contrib-cssmin   css

    grunt-contrib-htmlmin   html

    grunt-contrib-imagemin

よく使われている

    grunt-contrib-concat     

    grunt-contrib-clean          

    grunt-contrib-cope     

    grunt-contrib-jshint   js    

    grunt-contrib-less   less

プラグインをダウンロードします.npm install grunt-contrib-less--save-dev
作成プロセス:

   module.exports=function(grunt){
//1.    
grunt.loadNpmTasks('grunt-contrib-uglify');

//2      
grunt.initConfig({
       :{    //          （uglify）
        a:{  //      
            src:'XXX',  //   
            dest:'XXX' //     
        }
    }
});
//3        
grunt.registerTask('default',['uglify','htmlmin']);
  }

運転:gruntメインタスク名gruntメインタスク名:サブタスク名grunt
一般的なプロジェクトの中で、他の人はダウンロードしたファイルをあなたにあげることはできません.配置ファイルはプロジェクトとGuntfile.jsだけあげます.package.json 1、npm installはpackage.jsonの中でdevDependenciesの中のすべての依存モジュール2、grunt grunt:ディレクトリ名は括弧を使うことができません.
全体編纂手順:Guntfile.js

module.exports=function(grunt){
    //1.    
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    //2      
    grunt.initConfig({
        uglify:{
            a:{
                src:'src2/js/*.js',
                dest:'build/js/main.js'
            }
        },
        cssmin:{
            a:{
                src:'src2/css/*.css',
                dest:'build/css/main.css'
            }
        },
        htmlmin:{
            options:{
                removeComments:true,
                collapseWhitespace:true
            },
            a:{
                src:'src2/new.html',
                dest:'build/new.html'
            }
        },
        imagemin:{
            a:{
                expand:true,
                cwd:'src2/img',
                src:'*.gif',
                dest:'build/img'
            }
        },
        watch:{
            a:{
                files:['src2/new.html','src2/css/*.css'],
                tasks:['htmlmin','cssmin']
            }
        }
    });
    //3        
    grunt.registerTask('default',['uglify','cssmin','htmlmin','imagemin','watch']);
}

gulp:
gruntと同じですが、gruntブロック、gulp原理のバイナリのストリームに比べて、gruntはファイル公式サイトです.gulpjs.com
基本的な流れ
1、gulpをインストールするコマンド環境
npm install gulp-cli-g
2、OKかどうかを検証する
gulp--version
3、二つの書類を準備する.
gulp file.jsタスク編成ファイル自動生成package.jsonコマンド:npm init一緒に車に戻ります.
4、npm install glp--save-dev/地元のgulpをダウンロードします.
5、gulpをダウンロードするプラグイン
gulp常用プラグイン:gulp-watchモニター変化

            gulp-uglify   js

            gulp-cssmin   css

            gulp-htmlmin   html

            gulp-imagemin

6、タスクの作成

//1、    
      var uglify =require（‘gulp-uglify’）
      //2、    
      gulp.task('uglify（         ）',function(){
         gulp.src('src/a.js')
         .pipe(uglify({mangle:false}))
         .pipe(gulp.dest('dest'));
      })
      //3、     
      gulp.task('default',['   ']);

    ：gulp    watch    
      gulp.watch('   ',['   '])

全体編纂手順:gulpfile.js

//    
var gulp=require('gulp');
var uglify=require('gulp-uglify');
var htmlmin=require('gulp-htmlmin');
var cssmin=require('gulp-cssmin');
var imagemin=require('gulp-imagemin');
var concat=require('gulp-concat');

//    
gulp.task('uglify:css',function(){
    gulp.src('src/css/*.css')
    .pipe(cssmin())
    .pipe(gulp.dest('build/css'))
});
gulp.task('uglify:js',function(){
    gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest('build/js'))
});
gulp.task('uglify:img',function(){
    gulp.src('src/img/*.gif')
    .pipe(imagemin())
    .pipe(gulp.dest('build/img'))
});
gulp.task('uglify:html',function(){
    gulp.src('src/new.html')
    .pipe(htmlmin({
        collapseWhitespace:true
    }))
    .pipe(gulp.dest('build/new.html'))
});
//    
gulp.watch('src/new.html',['uglify:html']);
//      
gulp.task('default',['uglify:css','uglify:js','uglify:img','uglify:html']);

nodejsインテグレーションsqlite