Skip to content

ike-yu-byte/imitate_xiaomi

BranchesTags

Repository files navigation

原生开发-仿小米网站

1. 项目描述

前端技术

HTML+css+jQuery

后端技术

PHP+MySQL

开发工具

gulp3+scss+require.js

协同开发

gitee+GitHub

​ 为了更安全的上传大文件，采用ssh方式上传 ，需要生成公钥

ssh-keygen -t rsa -C  [email protected]

效果图

2.gulp搭建

node要求：版本不高于12

gulp版本：3.9.1

已经准备好了如上所示框架

2.1 初始化项目

npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (xiaomi) 
version: (1.0.0)
description:
entry point: (jquery-1.11.3.js)
test command:
git repository: (https://github.com/ike-yu-byte/imitate_xiaomi.git)
keywords:
author:
license: (ISC)
About to write to C:\Users\ike\Desktop\Xiaomi\package.json:

{
  "name": "xiaomi",
  "version": "1.0.0",
  "description": "**前端技术**：HTML+css+jQuery",
  "main": "jquery-1.11.3.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ike-yu-byte/imitate_xiaomi.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ike-yu-byte/imitate_xiaomi/issues"
  },
  "homepage": "https://github.com/ike-yu-byte/imitate_xiaomi#readme"
}


Is this OK? (yes)

一路回车

{
  "name": "xiaomi",
  "version": "1.0.0",
  "description": "**前端技术**：HTML+css+jQuery",
  "main": "jquery-1.11.3.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ike-yu-byte/imitate_xiaomi.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ike-yu-byte/imitate_xiaomi/issues"
  },
  "homepage": "https://github.com/ike-yu-byte/imitate_xiaomi#readme"
}

项目里出现如上所示package.json文件

2.2 安装gulp

npm view gulp versions

[
  '0.0.1',  '0.0.2', '0.0.3', '0.0.4', '0.0.5',
  '0.0.7',  '0.0.8', '0.0.9', '0.1.0', '0.2.0',
  '1.0.0',  '1.1.0', '1.2.0', '1.2.1', '2.0.0',
  '2.0.1',  '2.1.0', '2.2.0', '2.3.0', '2.4.0',
  '2.4.1',  '2.6.0', '2.6.1', '2.7.0', '3.0.0',
  '3.1.1',  '3.1.2', '3.1.3', '3.1.4', '3.2.0',
  '3.2.1',  '3.2.2', '3.2.3', '3.2.4', '3.2.5',
  '3.3.0',  '3.3.1', '3.3.2', '3.3.4', '3.4.0',
  '3.5.0',  '3.5.1', '3.5.2', '3.5.5', '3.5.6',
  '3.6.0',  '3.6.1', '3.6.2', '3.7.0', '3.8.0',
  '3.8.1',  '3.8.2', '3.8.3', '3.8.4', '3.8.5',
  '3.8.6',  '3.8.7', '3.8.8', '3.8.9', '3.8.10',
  '3.8.11', '3.9.0', '3.9.1', '4.0.0', '4.0.1',
  '4.0.2'
]

查看所有版本号

npm i -g gulp

​ 全局安装gulp命令行

npm install [email protected] --save-dev

​ 安装gulp开发依赖

2.3 安装插件

gulp-sass：将scss转成css，必须同时安装sass插件

gulp-minify-css：将css压缩

gulp-rename：文件重命名

npm i gulp-sass sass gulp-minify-css gulp-rename -D

2.4 测试gulp任务

新建一个gulpfile.js文件

const gulp = require('gulp')

gulp.task('hello', () => {
    console.log('hello gulp')
})

运行后结果如上所示

2.5 nvm版本控制(扩展)

GitHub地址

下载地址

root: D:\software\nvm\nvm
path: D:\software\nvm\node
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

切换镜像配置，以防有些包下载失败

nvm install 11.15.0

安装指定版本的node

如上所示切换node，并在node环境下安装依赖和运行程序

2.6 批量处理文件

以功能为例,其它看gulpfile.js文件

2.6.1 压缩css

方式一：利用minifycss压缩时

/* 引入gulp开发依赖 */
const gulp = require('gulp')
/* 引入gulp开发依赖 */

/* 引入插件依赖 */
var scss = require('gulp-sass')(require('sass'))
// 注意：gulp-sass必须配合gulp-sass一起使用
const minifyCSS = require('gulp-minify-css')
const rename = require('gulp-rename')
/* 引入插件依赖 */

/* 批量处理scss */
gulp.task('scssAll',function(){
    return gulp.src('./stylesheet/*.scss')
    .pipe(scss())
    .pipe(gulp.dest('./dist/css'))
    .pipe(minifyCSS())
    .pipe(rename({suffix: '.min'})) //	后缀 
    .pipe(gulp.dest('dist/css/'))
    // 注意：路径加不加'./'和'/'都无所谓
})
/* 批量处理scss */

注意：rename参数是个回调函数时

.pipe(rename(function(path){
   console.log(path)
}))

注意：rename参数为对象时，可以有以下属性

{
    dirname: "main/text/ciao",
    basename: "aloha",
    prefix: "bonjour-",
    suffix: "-hola",
    extname: ".md"
}

方式二：利用sass压缩时

/* 引入gulp开发依赖 */
const gulp = require('gulp')
/* 引入gulp开发依赖 */

/* 引入插件依赖 */
var scss = require('gulp-sass')(require('sass'))
// 注意：gulp-sass必须配合gulp-sass一起使用
const minifyCSS = require('gulp-minify-css')
const rename = require('gulp-rename')
/* 引入插件依赖 */

gulp.task('scssAll',function(){
    return gulp.src('./stylesheet/*.scss')
    .pipe(scss({
        outputStyle: 'compressed'
    }))
    // .pipe(gulp.dest('./dist/css'))
    // .pipe(minifyCSS())
    // .pipe(rename({
    //     suffix: "min"
    // }) // 必须注释，否则报错
    .pipe(gulp.dest('dist/css/'))
    // 注意：路径加不加'./'和'/'都无所谓
})

2.6.2 复制文件

/*批量复制json文件 */
gulp.task('json', () => {
    return gulp.src(['*.json','!package.json','!package-lock.json'])
    .pipe(gulp.dest('dist/data'))
})
/* 批量复制json文件 */

其它类型文件处理和这类似，故不再举例

2.6.3 执行多任务

/* 一次执行多个任务 */
gulp.task('build', ['scssAll', 'scripts', 'html', 'json', 'images'], () => {
    console.log('项目建立成功')
})
/* 一次执行多个任务 */

2.6.4 监听文件变化

这里通过一个任务来监听多种文件变化

/* 监听文件变化 */
gulp.task('watch', () => {
    // watch('文件匹配规则', [option可选项], [任务])  
    gulp.watch('stylesheet/index.scss', ['scss'])
    gulp.watch('stylesheet/*.scss', ['scssAll'])
    gulp.watch(["*.js", "!gulpfile.js"], ['scripts'])
    gulp.watch('*.html', ['html'])
    gulp.watch(['*.json','!package.json','!package-lock.json'], ['json'])
    gulp.watch('images/**/*', ['images'])
})
/* 监听文件变化 */

注意：要文件保存后才会监听到变化哟

2.7 本地服务

gulp-connect

npm install --save-dev gulp-connect

/* 启动一个服务 */
var connect = require('gulp-connect')
gulp.task('server', () => {
    connect.server({
        root: 'dist/html', // 默认显示dist/html/index.html文件
        port: 8888,
        livereload: true
    })
})
/* 启动一个服务 */

2.8 服务刷新

  1. 默认任务，开启本地服务同时监听文件变化
/* 默认任务 */
gulp.task('default', ['watch','server']) // 默认任务直接通过gulp运行
/* 默认任务 */
  1. 实时刷新服务
/* 批量处理图片 */
gulp.task('images', () => {
    return gulp.src('images/**/*')
    // 'images/*/*' 为images下的所有文件夹及文件夹里面的所有，是错误写法
    .pipe(gulp.dest('dist/images'))
    .pipe(connect.reload())
})
/* 批量处理图片 */

每个任务都如上所示“刷新服务”，即加上connect.reload()

2.9 默认任务

/* 默认任务 */
gulp.task('default', ['watch','server']) // 默认任务直接通过gulp运行
/* 默认任务 */

然后向2.8那样使用

2.10 gulp API

3.小米项目

项目准备了以上文件，其中require.js是第三方库

模块开发

借助requireJs第三方库，基于AMD开发规范

requireJs使用教程

例1： 测试入口文件

<!-- 模块开发 -->
<!-- defer:ie下异步加载  async="true"谷歌火狐下异步加载 -->
<!-- data-main指定js程序入口文件,也叫主模块，其中main.js的文件后缀可去掉 -->
<script src = 'js/require.js' defer async='true' data-main='js/main.js'></script>

以后相关js代码写在main.js当中，或者引入到main.js当中

例2：配置项目依赖

/* 
    配置当前项目用到哪些模块
    遵从AMD规范
    所有js文件后缀可省略
 */
require.config({
    paths:{ // 各模块路径
        "jquery": "./jquery-1.11.3",
        "jquery-cookie": "./jquery.cookie.js"
    },
    shim: { // 设置依赖关系
        "jquery-cookie": ["jquery"], // jquery-cookie依赖jQuery，进而先加载jQuery
    }
})

About

原生开发-仿小米网站

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages