gruntは複数のjsファイルとcssファイルを個別に圧縮する

gruntを使用してフロントエンドjs,cssファイルを圧縮
最近作ったクライアントのローカルプロジェクトは10数個のjsに役立つため、jsがコミットする前に圧縮する必要があります.gruntで圧縮するのはもう珍しいことではありませんが、前のプロジェクトは他の人が配置してくれたものを使っていました.だから深く研究しなかった.今回はタイプが違うので、アップロードする必要はありません.ファイル圧縮だけです.だから午後自分でgruntを研究したのは確かに使いやすいです.
 
ここではjsとcssを単独で圧縮する必要がある.ネット上の多くは統合圧縮です.複数のjsが合併するとステルスな問題があると思います.やはり単独圧縮が好きです.以下の紹介では、複数のファイルを個別に圧縮するだけです.
一、gruntとは何か、
gruntはフロントエンドオートメーションツールで、nodeJsベースのコマンドラインツールで、一般的には:1ファイルを圧縮する②ファイルをマージする③簡単な文法チェック
 
他の使い方については、まだよくわかりませんが、gruntの圧縮、マージファイルについて簡単に紹介します.
二、準備段階
1,nodejs環境
gruntはnodeJsベースなので、まずnodeJS環境をインストールする必要があります
nodejsをインストールします.
インストール後のチェック
cmdを開く
入力:node-v
 
出力:v 0.10.28(これは私のバージョンです)
三、gruntのインストール
NodeJs環境があれば、gruntを開始することができます.どのディレクトリでもパッケージを実行する可能性があるので、CLIをインストールする必要があります.CLIは、グローバルにCLI(gruntのコマンドラインインタフェース)をインストールすることを推奨します.
入力:npm install-g grunt-cli
このコマンドはgruntコマンドをシステムパスに埋め込み、任意のディレクトリで実行できます.理由は
gruntを実行するたびに、nodeのrequireを使用してローカルにgruntがインストールされているかどうかを検索します.CLIが見つかったら、このローカルgruntライブラリをロードし、プロジェクトのGruntFile構成を適用し、タスクを実行します.
psここにインストールしたら、普通は私たちのC:UsersSOSAppDataRoamingpmode_modules
 
grunt-cliファイルが表示されます
四、packageを追加します.jsonとGruntfile.jsファイル
package.json
コードは次のとおりです.

{
  "name": "test",
  "version": "0.1.0",
  "description": "test",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

 Gruntfile.js
コードは次のとおりです.

module.exports = function (grunt) {

    //       
    grunt.initConfig({

        //  package.json   ，   json  
        pkg: grunt.file.readJSON('package.json'),

        //  js
        uglify: {
            //        
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
'
            },
            my_target: {
                files: [
                    {
                        expand: true,
                        //    
                        cwd: 'js/',
                        src: '*.js',
                        dest: 'dest/js/',
                        rename: function (dest, src) {  
                                  var folder = src.substring(0, src.lastIndexOf('/'));  
                                  var filename = src.substring(src.lastIndexOf('/'), src.length);  
                                  //  var filename=src;  
                                  filename = filename.substring(0, filename.lastIndexOf('.'));  
                                  var fileresult=dest + folder + filename + '.min.js';  
                                  grunt.log.writeln("     ："+src+"       ："+fileresult);  
            
                                  return fileresult;  
                                  //return  filename + '.min.js';  
                              } 
                    }
                ]
            }
        },

        //  css
        cssmin: {
            //        
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
',
                //    
                beautify: {
                    //  ascii ，    ！          
                    ascii_only: true
                }
            },
            my_target: {
                files: [
                    {
                        expand: true,
                        //    
                        cwd: 'css/',
                        src: '*.css',
                        dest: 'dest/css/',
                        rename: function (dest, src) {  
                                var folder = src.substring(0, src.lastIndexOf('/'));  
                                var filename = src.substring(src.lastIndexOf('/'), src.length);  
                                //  var filename=src;  
                                filename = filename.substring(0, filename.lastIndexOf('.'));  
                                var fileresult=dest + folder + filename + '.min.css';  
                                grunt.log.writeln("     ："+src+"       ："+fileresult);  

                                return fileresult;  
                              //return  filename + '.min.js';
                                }
                    }
                ]
            }
        }

    });

    //         
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    //        
    grunt.registerTask('default', ['uglify', 'cssmin']);

};

 
ここでは主にjsとcssを一括圧縮します
grunt-contrib-uglifyとgrunt-contrib-cssminの2つのプラグインに依存します
 
 
作成後、プロジェクトのルートディレクトリでコマンドを実行する必要があります.
入力:npm install
関連するファイルがダウンロードされます
 
この時点でルートディレクトリの下にnodeというファイルの名前が複数あります.modules
これで圧縮できます
 
ルートディレクトリに入ってコマンドgruntを入力して車に戻ればok
 
このとき出力にエラーがある場合は「grunt-contrib-cssmin」notfoundと言う可能性があります
grunt-contrib-cssminプラグインをダウンロードします
入力コマンド:npm install grunt-contrib-cssmin
OK
このとき出力にエラーがあればFatal error:Unable to find local grunt
またはgruntのエラーが見つからない
gruntを再インストールできます
C:UsersSOSAppDataRoamingpmode_modulesの下のgrunt-cliファイルを削除します.再実行
npm install -g grunt-cli
最後にgruntを入力するだけで戻ります
出力された内容を見ればOKかOKかわかります
OKを実行した後、私達のディレクトリの中で1つのファイルdestの中のcssとjsのファイルがあってすべて複数のファイルの単独の圧縮です
 
これは私たちが手動で一つ一つ圧縮する悩みを省くことができます.
gruntがどのように働いているのかを深く理解すればgruntの公式サイトを見ることができます.
 
http://www.gruntjs.org/docs/getting-started.html 私は中国語のウェブサイトを見ます