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

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

WBOY

リリース： 2016-06-21 08:52:24

オリジナル

1116 人が閲覧しました

出典: 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: タスクを完了するために必要なモジュールをロードします。