HTML+css+jQuery
PHP+MySQL
gulp3+scss+require.js
gitee+GitHub
为了更安全的上传大文件，采用ssh方式上传 ，需要生成公钥
ssh-keygen -t rsa -C ike_yu@qq.com
node要求：版本不高于12
gulp版本：3.9.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文件
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 gulp@3.9.1 --save-dev
安装gulp开发依赖
gulp-sass：将scss转成css，必须同时安装sass插件
gulp-minify-css：将css压缩
gulp-rename：文件重命名
npm i gulp-sass sass gulp-minify-css gulp-rename -D
新建一个gulpfile.js文件
const gulp = require('gulp')
gulp.task('hello', () => {
console.log('hello gulp')
})
运行后结果如上所示
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环境下安装依赖和运行程序
以功能为例,其它看gulpfile.js文件
方式一：利用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/'))
// 注意：路径加不加'./'和'/'都无所谓
})
/*批量复制json文件 */
gulp.task('json', () => {
return gulp.src(['*.json','!package.json','!package-lock.json'])
.pipe(gulp.dest('dist/data'))
})
/* 批量复制json文件 */其它类型文件处理和这类似，故不再举例
/* 一次执行多个任务 */
gulp.task('build', ['scssAll', 'scripts', 'html', 'json', 'images'], () => {
console.log('项目建立成功')
})
/* 一次执行多个任务 */
这里通过一个任务来监听多种文件变化
/* 监听文件变化 */
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'])
})
/* 监听文件变化 */
注意：要文件保存后才会监听到变化哟
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
})
})
/* 启动一个服务 */
- 默认任务，开启本地服务同时监听文件变化
/* 默认任务 */
gulp.task('default', ['watch','server']) // 默认任务直接通过gulp运行
/* 默认任务 */- 实时刷新服务
/* 批量处理图片 */
gulp.task('images', () => {
return gulp.src('images/**/*')
// 'images/*/*' 为images下的所有文件夹及文件夹里面的所有，是错误写法
.pipe(gulp.dest('dist/images'))
.pipe(connect.reload())
})
/* 批量处理图片 */每个任务都如上所示“刷新服务”，即加上connect.reload()
/* 默认任务 */
gulp.task('default', ['watch','server']) // 默认任务直接通过gulp运行
/* 默认任务 */然后向2.8那样使用
项目准备了以上文件，其中require.js是第三方库
借助requireJs第三方库，基于AMD开发规范
例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
}
})