フロントエンド js と css の圧縮とマージ grunt_html/css_WEB-ITnose

出典: http://www.haorooms.com/post/qd_grunt_cssjs

CSS と JS を圧縮および結合する方法については、フロントエンドで書いたことを思い出してください。インタビューの質問。たくさんの方法がありますが、今日は主にイサキの方法を紹介します。

前提条件

Grunt はノードに基づいています。コンピュータ上で Grunt を使用するには、ノード環境がコンピュータにインストールされている必要があります。特定のノード環境のインストールと構築。 centos をご覧ください。Windows のインストールは、インストール パッケージをダウンロードしてインストールするだけです。 Macのインストールに関しては後ほど詳しく紹介します。

新しい package.json

package.json はルート ディレクトリに配置されます。これには、プロジェクト名、説明、バージョン番号、プラグイン、等

{"name":"haorooms.com","version":"v0.1.0","devDependencies":{"grunt":"~0.4.5","grunt-contrib-jshint":"~0.10.0","grunt-contrib-nodeunit":"~0.4.1","grunt-contrib-uglify":"~0.5.0","grunt-contrib-concat":"~0.5.1","grunt-contrib-cssmin":"~0.12.3","grunt-htmlhint":"~0.9.2"}}

grunt-contrib-jshint (js 構文チェック)、grunt-contrib-concat (js マージ)、grunt-contrib-uglify (UglifyJS を使用して js を圧縮)、grunt-contrib-cssmin (Css圧縮マージ)、grunt-htmlhint (HTML 構文チェック)、上記は一般的に使用されるプラグインです。

その他のプラグインについては、http://gruntjs.com/plugins をご覧ください。

プラグインのインストール

インストール: uglify

npm install grunt-contrib-uglify

Install concat

npm install grunt-contrib-concat

インストール: cssmin

npm install grunt-contrib-cssmin

プラグインがインストールされたら、ルート ディレクトリを確認すると、対応するプラグインが含まれる node_modules ディレクトリが見つかります。 -inディレクトリ。

新しい Gruntfile.js を作成します

Gruntfile.js は次の内容で構成されます

1. ラッパー関数は次のような構造になっています。これは Node の一般的な記述方法です。 .js を使用して API を公開します。

module.exports =function(grunt){// Do grunt-related things in here};

2. プロジェクトとタスクの設定

4.タスク

例:

また、js と css をマージせずに個別に圧縮することもできます。例:

module.exports =function(grunt){//配置参数 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat:{ options:{ separator:';', stripBanners:true}, dist:{ src:["js/config.js","js/smeite.js","js/index.js"], dest:"assets/js/default.js"}}, uglify:{ options:{}, dist:{ files:{'assets/js/default.min.js':'assets/js/default.js'}}}, cssmin:{ options:{ keepSpecialComments:0}, compress:{ files:{'assets/css/default.css':["css/global.css","css/pops.css","css/index.css"]}}}});//载入concat和uglify插件，分别对于合并和压缩 grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin');//注册任务 grunt.registerTask('default',['concat','uglify','cssmin']);}

grunt API ドキュメント: http:// gruntjs.com/api/grunt

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") %> */\n'}, my_target:{ files:[{ expand:true,//相对路径 cwd:'js/', src:'*.js',//src: ['**/*.js', '!**/*.min.js'], //不包含某个js,某个文件夹下的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") %> */\n',//美化代码 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']);};

grunt.initConfig メソッド

はモジュールの設定に使用され、オブジェクトをパラメータとして受け取ります。このオブジェクトのメンバーは、使用されている同じ名前のモジュールと 1 対 1 に対応します。

各ターゲットの具体的な設定については、テンプレートのドキュメントを参照する必要があります。 cssmin に関する限り、縮小ターゲットのパラメーターの具体的な意味は次のとおりです:

expand: true に設定すると、次のファイル名のプレースホルダー (つまり * 記号) が必要であることを意味します。特定のファイル名に展開されます。

cwd: 処理されるファイル (入力) が配置されているディレクトリ。

src: 処理する必要があるファイルを示します。配列形式の場合、配列内の各項目はファイル名となり、ワイルドカードを使用できます。

dest: 処理されたファイル名またはディレクトリを示します。

ext: 処理されたファイルの拡張子名を示します。

grunt 共通関数の説明:

grunt.initConfig: 各メンバー項目は、同じ名前のモジュールに対応します。

grunt.loadNpmTasks: タスクを完了するために必要なモジュールをロードします。

grunt.registerTask: 特定のタスクを定義します。最初のパラメータはタスク名で、2 番目のパラメータはタスクが順番に使用する必要があるモジュールを示す配列です。

コマンド ラインで grunt タスクが実行されます

プロジェクトのルート ディレクトリを入力し、次のように入力します。

Gruntfile で設定されたファイルは圧縮され、マージされます。

grunt

は個別に実行することもできます。たとえば、js 圧縮コマンド

css 圧縮コマンド

grunt uglify

+

grunt cssmin

+

+

=

+

+

=