Browse Source

将css和js打包为一个文件,并cdn加速。

liuyuqi-dellpc 6 years ago
parent
commit
3836a110fc
4 changed files with 113 additions and 8 deletions
  1. 2 0
      .gitignore
  2. 77 0
      gulpfile.js
  3. 10 8
      include/assets.php
  4. 24 0
      package.json

+ 2 - 0
.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/package-lock.json

+ 77 - 0
gulpfile.js

@@ -0,0 +1,77 @@
+var gulp = require('gulp');
+uglify = require('gulp-uglify');
+concat = require('gulp-concat');
+minifyCss = require('gulp-minify-css');
+rev = require('gulp-rev');
+revCollector = require('gulp-rev-collector');
+
+//(1)css
+gulp.task('css', function() {                                //- 创建一个名为 concat 的 task
+    gulp.src([
+'./assets/css/normalize.css',
+'./assets/css/plugins/animate.css',
+'./assets/css/plugins/jquery.slicknav.css',
+'./assets/css/pen-base.css',
+'./assets/css/pen-fonts.css',
+'./assets/css/pen-typography.css',
+'./assets/css/pen-layout.css',
+'./assets/css/pen-buttons.css',
+'./assets/css/pen-bottom.css',
+'./assets/css/pen-comments.css',
+'./assets/css/pen-footer.css',
+'./assets/css/pen-header.css',
+'./assets/css/pen-menus.css',
+'./assets/css/pen-navigation.css',
+'./assets/css/pen-forms.css',
+'./assets/css/pen-content.css',
+'./assets/css/pen-thumbnails.css',
+'./assets/css/pen-author.css',
+'./assets/css/pen-pagination.css',
+'./assets/css/pen-share.css',
+'./assets/css/pen-search-bar.css',
+'./assets/css/pen-top.css',
+'./assets/css/pen-widgets.css',
+'./assets/css/pen-general.css'])    //- 需要处理的css文件,放到一个字符串数组里
+        .pipe(concat('pan.min.css'))                            //- 合并后的文件名
+        .pipe(minifyCss())                                      //- 压缩处理成一行
+        .pipe(rev())                                            //- 文件名加MD5后缀
+        .pipe(gulp.dest('./dist/css'))                               //- 输出文件本地
+//         .pipe(rev.manifest())                                   //- 生成一个rev-manifest.json
+//         .pipe(gulp.dest('./dist/rev'));                              //- 将 rev-manifest.json 保存到 rev 目录内
+});
+
+gulp.task('rev', function() {
+    gulp.src(['./rev/*.json', './application/**/header.php'])   //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
+        .pipe(revCollector())                                   //- 执行文件内css名的替换
+        .pipe(gulp.dest('./application/'));                     //- 替换后的文件输出的目录
+});
+
+
+// fontawesome.woff移动
+// http://cdn.yoqi.me/blog/wp-content/themes/pen/dist/fonts/fontawesome/fontawesome.woff?v=4.7.0
+
+//执行 gulp css
+/////////////////////////////////////
+
+//js
+gulp.task('js', function () {
+  return gulp.src([
+	  './assets/js/plugins/jquery.fittext.js',
+	  './assets/js/plugins/respond.js',
+	  './assets/js/skip-link-focus-fix.js',
+	  './assets/js/plugins/autosize.js'])
+	.pipe(concat('pan.min.js'))
+    .pipe(uglify())
+	.pipe(rev())
+    .pipe(gulp.dest('dist/js'));
+});
+
+// gulp.task('js', function () {
+//   return gulp.src('./assets/js/**/*.js')
+// 	.pipe(concat('pan.js'))
+//     // .pipe(uglify())
+// 	.pipe(rev())
+//     .pipe(gulp.dest('dist/js'));
+// });
+
+// gulp.task('default', ['css', 'rev','js']);

+ 10 - 8
include/assets.php

@@ -50,14 +50,16 @@ if ( ! function_exists( 'pen_assets' ) ) {
 			$css_files['custom'] = '/assets/css/custom.css';
 		}
 
-		foreach ( $css_files as $key => $value ) {
-			wp_enqueue_style( 'pen-' . $key, $theme_directory . $value, array(), PEN_THEME_VERSION );
-		}
-
-		wp_enqueue_script( 'jquery-fittext', $theme_directory . '/assets/js/plugins/jquery.fittext.js', array( 'jquery' ), '1.2', true );
-		wp_enqueue_script( 'autosize', $theme_directory . '/assets/js/plugins/autosize.js', array(), '4.0', true );
-		wp_enqueue_script( 'respond', $theme_directory . '/assets/js/plugins/respond.js', array( 'jquery' ), '1.4.2', true );
-		wp_enqueue_script( 'pen-skip', $theme_directory . '/assets/js/skip-link-focus-fix.js', array( 'jquery' ), PEN_THEME_VERSION, true );
+// 		foreach ( $css_files as $key => $value ) {
+// 			wp_enqueue_style( 'pen-' . $key, $theme_directory . $value, array(), PEN_THEME_VERSION );
+// 		}
+		wp_enqueue_style( 'pen-css', $theme_directory . "/dist/css/pan-4af3e60461.min.css", array(), PEN_THEME_VERSION );
+
+		//wp_enqueue_script( 'jquery-fittext', $theme_directory . '/assets/js/plugins/jquery.fittext.js', array( 'jquery' ), '1.2', true );
+		//wp_enqueue_script( 'autosize', $theme_directory . '/assets/js/plugins/autosize.js', array(), '4.0', true );
+		//wp_enqueue_script( 'respond', $theme_directory . '/assets/js/plugins/respond.js', array( 'jquery' ), '1.4.2', true );
+		//wp_enqueue_script( 'pen-skip', $theme_directory . '/assets/js/skip-link-focus-fix.js', array( 'jquery' ), PEN_THEME_VERSION, true );
+		wp_enqueue_script( 'pen-js', $theme_directory . '/dist/js/pan-3480f10a61.min.js', array(), '3.7.3', false );
 
 		if ( is_singular() ) {
 			wp_enqueue_script( 'comment-reply' );

+ 24 - 0
package.json

@@ -0,0 +1,24 @@
+{
+  "name": "pen",
+  "version": "1.0.0",
+  "description": "=== Pen ===\r Contributors: htmlpie\r Tags: left-sidebar, right-sidebar, fixed-width, custom-background, custom-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, sticky-post, threaded-comments, translation-ready\r Requires at least: 4.8\r Requires PHP: 5.6\r Tested up to: 5.1\r Stable tag: 1.1\r License: GPLv2 or later\r License URI: http://www.gnu.org/licenses/gpl-2.0.html",
+  "main": "comments-ajax.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.yoqi.me/lyq/pen.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-concat": "^2.6.1",
+    "gulp-minify-css": "^1.2.4",
+    "gulp-rev": "^9.0.0",
+    "gulp-rev-collector": "^1.3.1",
+    "gulp-uglify": "^3.0.2"
+  },
+  "dependencies": {}
+}