npm install cnpm -g --registry=https://registry.npm.taobao.orgcss
cnpm -vhtml
npm init
cnpm init (可代替 npm init)npm
(须要项目名称、版本号、描述、入口文件、运行命令、做者、证书 ---- 一路按回车便可)json
cnpm i gulp@3 -ggulp
全局安装gulp后端
@3 表明选择了 3 的版本服务器
i 即为 installui
-g 即为 --global命令行
gulp -vcode
cnpm i gulp@3 -D
cnpm i gulp@3 -S (两者选择其一便可)
-D 缩写 --save-dev 开发依赖
-S 缩写 --save 项目依赖
开发依赖: 开发过程当中须要使用到的依赖的模块,项目上线时不须要的模块 --- 代码格式校验的模块
项目依赖: 项目上线仍然须要使用的模块
----- 若是不知道怎么选择,那你就写 -S
const gulp = require('gulp');
+++ // 复制index.html 到 dist 目录 gulp.task('copy-index', function () { gulp.src('./index.html') .pipe(gulp.dest('dist')) })
命令行执行了 gulp copy-index 发现多了 dist目录
gulp.src('./css/**/*')
拷贝css文件夹下的全部文件以及文件夹内的文件
+++ gulp.task('copy-css', function () { gulp.src('./css/**/*') .pipe(gulp.dest('dist/css')) })
gulp copy-css
cnpm i gulp-concat -S
//++++ const concat = require('gulp-concat'); gulp.task('copy-css', function () { gulp.src('./css/**/*') // 拿到全部的css // ++++ .pipe(concat('main.css')) // 合并 .pipe(gulp.dest('dist/css')) })
cnpm i gulp-minify-css -S
// ++++ const minifyCss = require('gulp-minify-css'); gulp.task('copy-css', function () { gulp.src('./css/**/*') // 拿到全部的css .pipe(concat('main.css')) // 合并 // ++++ .pipe(minifyCss()) // 压缩 .pipe(gulp.dest('dist/css')) })
cnpm i gulp-rename -S
重命名
合并代码放到dist/css
压缩css 重命名 再放到dist/css
//+++ const rename = require('gulp-rename'); gulp.task('copy-css', function () { gulp.src('./css/**/*') // 拿到全部的css .pipe(concat('main.css')) // 合并 //+++ .pipe(gulp.dest('dist/css')) .pipe(minifyCss()) // 压缩 //+++ .pipe(rename('main.min.css')) .pipe(gulp.dest('dist/css')) })
gulp.task('copy-js', () => { gulp.src('./js/**/*') .pipe(gulp.dest('dist/js')) })
gulp.task('copy-js', () => { gulp.src('./js/**/*') // +++ .pipe(concat('main.js')) .pipe(gulp.dest('dist/js')) })
cnpm i gulp-uglify -S
压缩js模块
//+++ const uglify = require('gulp-uglify'); gulp.task('copy-js', () => { gulp.src('./js/**/*') .pipe(concat('main.js')) // 合并js // +++ .pipe(uglify()) // 压缩js .pipe(gulp.dest('dist/js')) })
gulp.task('copy-js', () => { gulp.src('./js/**/*') .pipe(concat('main.js')) // 合并js // +++ .pipe(gulp.dest('dist/js')) .pipe(uglify()) // 压缩js // +++ .pipe(rename('main.min.js')) .pipe(gulp.dest('dist/js')) })
//+++ gulp.task('copy-images', () => { gulp.src('./assets/**/*') .pipe(gulp.dest('dist/assets')) })
cnpm i gulp-imagemin -S
//+++ const imagemin = require('gulp-imagemin'); gulp.task('copy-images', () => { gulp.src('./assets/**/*') // +++ .pipe(imagemin()) // 压缩图片 .pipe(gulp.dest('dist/assets')) })
没有后端接口时,本身的模拟数据
复制
// +++ gulp.task('copy-data', () => { gulp.src('./data/**/*') .pipe(gulp.dest('dist/data')) })
任务的名称不要本身随意定义,就写build
// +++ gulp.task('build', ['copy-index', 'copy-css', 'copy-js', 'copy-images', 'copy-data'], () => { console.log('success') })
cnpm i gulp-connect -S
server 任务名不能更改
//+++ gulp.task('server', () => { connect.server({ // 说明服务器的根目录 root: 'dist', livereload: true // 实时更新 }) })
// +++ gulp.task('watch', () => { gulp.watch('index.html', ['copy-index']) gulp.watch('css/**/*', ['copy-css']) gulp.watch('js/**/*', ['copy-js']) gulp.watch('assets/**/*', ['copy-images']) gulp.watch('data/**/*', ['copy-data']) })
gulp.task('default', ['server', 'watch'])
gulp
在页面、css、js、图片、数据相关任务最后执行一句话,从新启动服务器
gulp.task('copy-data', () => { gulp.src('./data/**/*') .pipe(gulp.dest('dist/data')) .pipe(connect.reload()) //********************************************* })