好程序员-JavaScript学习笔记-- GULP
JavaScript学习笔记-- GULPGULPgulp是一个项目开发的自动化打包构建工具基于node环境来运行的什么是自动化打包构建工具比如我们在开发的过程中，会写到js文件，css文件，等等我们的项目如果想上线，那么一定要体积小一点，文件大小越小越好而我们在写js文件的时候，会有很多换行/空格之类的东西这些换行/空格都是占文件体积的一部分那么我们在上线之前就要吧这些换行/空格尽可能的删除掉我们又不能一个文件一个文件的去删除就要用到一个自动化工具来帮助我们把这些多余的东西干掉这个就是自动化工具的意义常见的自动化打包构建工具gulpwebpack安装 GULPgulp是一个依赖于node的环境工具所以我们需要先安装一个全局gulp依赖直接使用npm去安装就可以了 使用 npm 安装全局依赖 gulp 我们这里安装一个 3.9.1 版本的就好了 $ npm install --global gulp@3.9.1等待安装完毕就好了这个全局环境一个电脑安装一次就好了还是照例检查一下是否安装成功$ gulp --version使用 GULP安装完毕以后，我们就可以使用 GULP 对我们的项目进行自动化构建了首先我们要有一个项目 gulp_demo 项目文件夹 src 项目源码 css css 文件夹 js js 文件夹 pages html 文件夹 sass sass 文件夹 lib 第三方文件夹 static 静态资源文件夹目录结构不一定都是这个样子 但是最好是一个便于管理的文件夹目录结构因为是一个项目了，最好使用npm来帮我们管理一下这样可以记录我们的下载使用了那些依赖所以在项目文件夹gulp-demo里面执行一个npm初始化$ cd gulp_demo$ npm init -y执行完毕之后，再来看一下我们的项目目录 gulp_demo src package.json项目 GULP 配置 我们之前已经安装过gulp全局依赖了但是每一个项目都要在安装一次gulp的项目依赖因为每一个项目的打包构建规则都不一样，所以不能全都配置成一个所以我们要在项目里面再次进行gulp安装$ cd gulp_demo$ npm install -D gulp@3.9.1项目中的gulp依赖要和全局gulp环境保持版本一致接下来就是对这个项目进行打包构建的配置gulp的使用，要在项目目录下新建一个gulpfile.js在这个gulpfile.js文件里面进行配置然后使用gulp进行构建的时候就会按照gulpfile.js文件里面的规则进行打包构建再来看一下我们的目录结构 gulp_demo node_modules 依赖包目录 src 项目源码 gulpfile.js gulp 配置文件 package-lock.json 依赖下载版本 json 文件 package.json 项目管理 json 文件接下来我们就是在gulpfile.js文件里面进行配置，让我们的打包构建可以生效 打包 CSS 文件我们从简单的内容开始，先来打包构建css文件其实就是在gulpfile.js里面进行一些配置第一个事情就是引入gulp// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')gulp是基于任务来完成构建的所以我们要创建一个打包css的任务// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2. 创建一个 css 的任务// gulp.task() 是用来创建任务的// 参数一： 任务名称// 参数二： 一个函数（这个任务要做什么事情）gulp.task('css', function () { })有了任务以后，我们就要在css这个任务里面写一些这个任务要做的事情了我们要把./src/css/所有css文件都进行压缩处理这个时候我们自己完成不了，就需要借助一个第三方依赖npm i -D gulp-cssmin下载完毕以后，去文件中进行配置// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2. 创建一个 css 的任务gulp.task('css', function () { return gulp .src('./src/css/**') // 对哪些文件进行操作 .pipe(cssmin()) // 都做什么，这里做的就是进行 css 压缩 .pipe(gulp.dest('./dist/css')) // 把压缩完毕的文件放在 dist 文件夹下的 css 文件夹 })gulp.src()是指找到那些文件对其操作gulp.pipe()是指要做什么gulp.dest()是指输出到哪个目录下，如果没有这个目录存在会自动创建这个目录所以上面哪个css任务的意思就是把./src/css/目录下的所有文件进行压缩压缩完毕后放在./dist/下的css/文件夹下接下来，就是执行一下这个叫做css的任务就行了直接在控制台使用指令 表示运行 gulpfils.js 配置文件中的 css 任务 $ gulp css 执行完毕以后，就会在gulp_demo目录下生成一个dist/文件夹里面就有我们压缩好的css文件自动添加前缀我们希望在css压缩之前，能帮我自动把需要前缀的属性自动把前缀添加上就好了这个是可以做到的我们又需要一个依赖了npm i -D gulp-autoprefixer安装完还是去到文件中进行配置// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2-1. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer') // 2. 创建一个 css 的任务gulp.task('css', function () { return gulp .src('./src/css/**') .pipe(autoPrefixer({ browsers: ['last 2 versions'] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }) 因为添加前缀需要在压缩之前添加所以我们就直接在任务里面多做一个事情就行了打包 SASS 文件接下来我们解决一下sass的问题因为有的时候我们开发要使用sass所以我们要解决一下sass的问题其实打包sass和css差不多，只不过先要把sass解析成css.把sass解析成css.自动添加前缀.压缩一下.放到对应的文件夹中使用gulp解析sass文件需要用到一个依赖npm i -D gulp-sass然后我们就去到配置文件里面进行配置就好了// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2-1. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer')// 2-2. 引入 gulp-sassconst sass = require('gulp-sass') // 2-1. 创建一个 css 的任务gulp.task('css', function () { return gulp .src('./src/css/**') .pipe(autoPrefixer({ browsers: ['last 2 versions'] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }) // 2-2. 创建一个 sass 任务gulp.task('sass', function () { return gulp .src('./src/sass/**') .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest('./dist/css'))}) 我们的sass文件编译完以后也是css文件，所以就也放在css文件夹下就好了就是要注意一下别和本来css文件夹下的文件重名就好了然后就可以去命令行执行sass这个任务了 执行 sass 任务 $ gulp sass打包 JS 文件接下来就是打包一下js文件了其实套路是一样的先来做最简单的操作压缩一下js文件需要用到一个依赖npm i -D gulp-uglify 然后依旧是去到配置文件中进行配置// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2-1. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer')// 2-3. 引入 gulp-sassconst sass = require('gulp-sass')// 3-1. 引入 gulp-uglifyconst uglify = require('gulp-urlify') // 2-1. 创建一个 css 的任务gulp.task('css', function () { return gulp .src('./src/css/**') .pipe(autoPrefixer({ browsers: ['last 2 versions'] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }) // 2-2. 创建一个 sass 任务gulp.task('sass', function () { return gulp .src('./src/sass/**') .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest('./dist/css'))}) // 3. 创建一个 js 任务gulp.task('js', function () { return gulp .src('./src/js/**') .pipe(uglify()) .pipe(gulp.dest('./dist/js'))}) 然后我们去命令行执行js这个任务 执行 js 任务 $ gulp js 编译 ES6 语法之前我们学习es6的时候就说过很多浏览器不是很认识es6的语法我们要把他编译成es5的语法所以我们在打包js文件的时候，就要转换一下我们依旧是使用依赖来完成，只不过es6转es5需要三个依赖npm i -D gulp-babel@7.0.1npm i -D babel-corenpm i -D babel-preset-es2015 然后我们就去配置文件里面进行配置就可以了// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2-1. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer')// 2-3. 引入 gulp-sassconst sass = require('gulp-sass')// 3-1. 引入 gulp-uglifyconst uglify = require('gulp-urlify')// 3-2. 引入 gulp-babel// es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了const babel = require('gulp-babel') // 2-1. 创建一个 css 的任务gulp.task('css', function () { return gulp .src('./src/css/**') .pipe(autoPrefixer({ browsers: ['last 2 versions'] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }) // 2-2. 创建一个 sass 任务gulp.task('sass', function () { return gulp .src('./src/sass/**') .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest('./dist/css'))}) // 3. 创建一个 js 任务gulp.task('js', function () { return gulp .src('./src/js/**') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify()) .pipe(gulp.dest('./dist/js'))}) 引入以后，只要在压缩之前执行一下转码就可以了注意要传递一个参数然后再次执行js任务就可以了 执行 js 任务$ gulp js 打包 HTML 文件接下来就要把html文件解决一下了还是一个套路压缩html文件需要一个依赖npm i -D gulp-htmlmin 下载好以后去到配置文件中进行配置// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2-1. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer')// 2-3. 引入 gulp-sassconst sass = require('gulp-sass')// 3-1. 引入 gulp-uglifyconst uglify = require('gulp-urlify')// 3-2. 引入 gulp-babel// es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了const babel = require('gulp-babel')// 4. 引入 gulp-htmlminconst htmlmin = require('gulp-htmlmin') // 2-1. 创建一个 css 的任务gulp.task('css', function () { return gulp .src('./src/css/**') .pipe(autoPrefixer({ browsers: ['last 2 versions'] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }) // 2-2. 创建一个 sass 任务gulp.task('sass', function () { return gulp .src('./src/sass/**') .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest('./dist/css'))}) // 3. 创建一个 js 任务gulp.task('js', function () { return gulp .src('./src/js/**') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify()) .pipe(gulp.dest('./dist/js'))}) // 4. 创建一个 html 任务gulp.task('html', function () { return gulp .src('./src/pages/**') .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest('./dist/pages'))}) 这样就配置完毕了接下来就是去命令行运行一下html任务 运行 html 任务 $ gulp html 处理 LIB 和 STATIC 文件接下来我们就是处理lib和static里面的文件了因为这些都是第三方的文件和一些图片之类的信息不需要压缩处理，只要给我转到dist文件夹下就可以了所以不需要依赖，直接处理就行// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2-1. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer')// 2-3. 引入 gulp-sassconst sass = require('gulp-sass')// 3-1. 引入 gulp-uglifyconst uglify = require('gulp-urlify')// 3-2. 引入 gulp-babel// es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了const babel = require('gulp-babel')// 4. 引入 gulp-htmlminconst htmlmin = require('gulp-htmlmin') // 2-1. 创建一个 css 的任务gulp.task('css', function () { return gulp .src('./src/css/**') .pipe(autoPrefixer({ browsers: ['last 2 versions'] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }) // 2-2. 创建一个 sass 任务gulp.task('sass', function () { return gulp .src('./src/sass/**') .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest('./dist/css'))}) // 3. 创建一个 js 任务gulp.task('js', function () { return gulp .src('./src/js/**') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify()) .pipe(gulp.dest('./dist/js'))}) // 4. 创建一个 html 任务gulp.task('html', function () { return gulp .src('./src/pages/**') .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest('./dist/pages'))}) // 5. 创建一个 lib 任务gulp.task('lib', function () { return gulp .src('./src/lib/**') .pipe(gulp.dest('./dist/lib'))}) // 6. 创建一个 static 任务gulp.task('static', function () { return gulp .src('./src/static/**') .pipe(gulp.dest('./dist/static'))}) 接下来就是去命令行执行lib任务和static任务 执行 lib 任务 $ gulp lib 执行 static 任务 $gulp static批量执行任务我们的几个和文件相关的任务都配置完毕了但是我们不能在开发过程中一个任务一个任务的去执行不方便也不是很只能所以我们要统一执行任务这个时候就需要进行一个配置，让几个任务一起执行一下这个不需要依赖，我们只需要配置一个叫做default的任务gulp在运行的时候会默认执行default任务// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2-1. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer')// 2-3. 引入 gulp-sassconst sass = require('gulp-sass')// 3-1. 引入 gulp-uglifyconst uglify = require('gulp-urlify')// 3-2. 引入 gulp-babel// es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了const babel = require('gulp-babel')// 4. 引入 gulp-htmlminconst htmlmin = require('gulp-htmlmin') // 2-1. 创建一个 css 的任务gulp.task('css', function () { return gulp .src('./src/css/**') .pipe(autoPrefixer({ browsers: ['last 2 versions'] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }) // 2-2. 创建一个 sass 任务gulp.task('sass', function () { return gulp .src('./src/sass/**') .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest('./dist/css'))}) // 3. 创建一个 js 任务gulp.task('js', function () { return gulp .src('./src/js/**') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify()) .pipe(gulp.dest('./dist/js'))}) // 4. 创建一个 html 任务gulp.task('html', function () { return gulp .src('./src/pages/**') .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest('./dist/pages'))}) // 5. 创建一个 lib 任务gulp.task('lib', function () { return gulp .src('./src/lib/**') .pipe(gulp.dest('./dist/lib'))}) // 6. 创建一个 static 任务gulp.task('static', function () { return gulp .src('./src/static/**') .pipe(gulp.dest('./dist/static'))}) // 7. 配置一个默认任务gulp.task('default', ['css', 'sass', 'js', 'html', 'lib', 'static'])这样配置完毕以后，当你运行gulp的时候，会自动执行default任务然后default任务就会把后面数组中写的几个任务并行执行了接下来就是去命令行里面运行gulp 运行 gulp，会默认执行 default 任务 $ gulp清除 DIST 文件夹当你在编译的时候，如果第一次编译有一个叫做a.css的文件，他会帮你编译后来你把a.css文件改名字了，改叫b.css，再次进行编译的时候会给你新生成一个b.css文件在dist文件夹中之前的a.css文件也不会消失那么这样就不是很好了我们比较好的做法是在执行所有的编译之前先把dist文件夹删除掉然后再执行所有的编译操作这样就不会用多余的文件留下了这个时候我们就要使用一个依赖npm i -D gulp-clean然后去配置文件里面配置一个任务// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2-1. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer')// 2-3. 引入 gulp-sassconst sass = require('gulp-sass')// 3-1. 引入 gulp-uglifyconst uglify = require('gulp-urlify')// 3-2. 引入 gulp-babel// es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了const babel = require('gulp-babel')// 4. 引入 gulp-htmlminconst htmlmin = require('gulp-htmlmin')// 5. 引入 gulp-cleanconst clean = require('gulp-clean') // 2-1. 创建一个 css 的任务gulp.task('css', function () { return gulp .src('./src/css/**') .pipe(autoPrefixer({ browsers: ['last 2 versions'] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }) // 2-2. 创建一个 sass 任务gulp.task('sass', function () { return gulp .src('./src/sass/**') .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest('./dist/css'))}) // 3. 创建一个 js 任务gulp.task('js', function () { return gulp .src('./src/js/**') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify()) .pipe(gulp.dest('./dist/js'))}) // 4. 创建一个 html 任务gulp.task('html', function () { return gulp .src('./src/pages/**') .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest('./dist/pages'))}) // 5. 创建一个 lib 任务gulp.task('lib', function () { return gulp .src('./src/lib/**') .pipe(gulp.dest('./dist/lib'))}) // 6. 创建一个 static 任务gulp.task('static', function () { return gulp .src('./src/static/**') .pipe(gulp.dest('./dist/static'))}) // 8. 创建一个 clean 任务gulp.task('clean', function () { return gulp .src('./dist') .pipe(clean())}) // 7. 配置一个默认任务gulp.task('default', ['css', 'sass', 'js', 'html', 'lib', 'static'])接下来我们执行任务的时候就应该先执行clean任务，再执行default任务 执行 clean 任务 $ gulp clean 执行 default 任务 $ gulp按顺序执行任务因为每次打包都要执行一个clean任务那么我们就可以把clean任务也加到default任务的队列里面执行gulp.task('default', ['clean', css', 'sass', 'js', 'html', 'lib', 'static']) 这样我们运行的时候，每次就都会帮我们执行clean任务了但是会出现一个问题因为后面队列里面的任务是并行的那么有的时间长有的时间短那么就会出现有一些文件已经压缩完毕放在dist/文件夹里面了然后clean任务执行完毕的时候又给直接清除掉了这样不是很好我们就需要让这些任务出现先后顺序先执行一下clean任务clean执行完毕以后，剩下的几个压缩文件的任务可以并行执行这个时候我们就需要用到一个依赖npm i -D run-sequence这个依赖是逐步执行任务的一个包这个时候我们修改一下default任务就好了// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2-1. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer')// 2-3. 引入 gulp-sassconst sass = require('gulp-sass')// 3-1. 引入 gulp-uglifyconst uglify = require('gulp-urlify')// 3-2. 引入 gulp-babel// es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了const babel = require('gulp-babel')// 4. 引入 gulp-htmlminconst htmlmin = require('gulp-htmlmin')// 5. 引入 gulp-cleanconst clean = require('gulp-clean')// 6. 引入 run-sequenceconst runSequence = require('run-sequence') // 2-1. 创建一个 css 的任务gulp.task('css', function () { return gulp .src('./src/css/**') .pipe(autoPrefixer({ browsers: ['last 2 versions'] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }) // 2-2. 创建一个 sass 任务gulp.task('sass', function () { return gulp .src('./src/sass/**') .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest('./dist/css'))}) // 3. 创建一个 js 任务gulp.task('js', function () { return gulp .src('./src/js/**') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify()) .pipe(gulp.dest('./dist/js'))}) // 4. 创建一个 html 任务gulp.task('html', function () { return gulp .src('./src/pages/**') .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest('./dist/pages'))}) // 5. 创建一个 lib 任务gulp.task('lib', function () { return gulp .src('./src/lib/**') .pipe(gulp.dest('./dist/lib'))}) // 6. 创建一个 static 任务gulp.task('static', function () { return gulp .src('./src/static/**') .pipe(gulp.dest('./dist/static'))}) // 8. 创建一个 clean 任务gulp.task('clean', function () { return gulp .src('./dist') .pipe(clean())}) // 7. 改写 default 任务gulp.task('default', function () { // 里面的每一个参数都可以是一个任务或者一个任务队列 // 再执行任务的时候，会把前一个任务队列完成的情况下再执行下一个任务队列 runSequence('clean', ['css', 'sass', 'js', 'html', 'lib', 'static'])}) 这样依赖，每次都是先执行clean任务执行完毕之后再并行执行那些压缩的任务就不会出现问题了然后我们就去命令行中运行gulp执行一下default任务就可以了 运行 gulp $ gulp自动打开浏览器我们的打包工作已经完成了接下来要是能再打包完毕自动帮我把浏览器打开就好了省的我自己去开了这个时候是可以做到的需要一个依赖npm i -D gulp-webserver然后进行配置// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2-1. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer')// 2-3. 引入 gulp-sassconst sass = require('gulp-sass')// 3-1. 引入 gulp-uglifyconst uglify = require('gulp-urlify')// 3-2. 引入 gulp-babel// es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了const babel = require('gulp-babel')// 4. 引入 gulp-htmlminconst htmlmin = require('gulp-htmlmin')// 5. 引入 gulp-cleanconst clean = require('gulp-clean')// 6. 引入 run-sequenceconst runSequence = require('run-sequence')// 7. 引入 gulp-webserverconst webserver = require('gulp-webserver') // 2-1. 创建一个 css 的任务gulp.task('css', function () { return gulp .src('./src/css/**') .pipe(autoPrefixer({ browsers: ['last 2 versions'] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }) // 2-2. 创建一个 sass 任务gulp.task('sass', function () { return gulp .src('./src/sass/**') .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest('./dist/css'))}) // 3. 创建一个 js 任务gulp.task('js', function () { return gulp .src('./src/js/**') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify()) .pipe(gulp.dest('./dist/js'))}) // 4. 创建一个 html 任务gulp.task('html', function () { return gulp .src('./src/pages/**') .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest('./dist/pages'))}) // 5. 创建一个 lib 任务gulp.task('lib', function () { return gulp .src('./src/lib/**') .pipe(gulp.dest('./dist/lib'))}) // 6. 创建一个 static 任务gulp.task('static', function () { return gulp .src('./src/static/**') .pipe(gulp.dest('./dist/static'))}) // 8. 创建一个 clean 任务gulp.task('clean', function () { return gulp .src('./dist') .pipe(clean())}) // 9. 创建一个 webserver 任务gulp.task('webserver', function () { return gulp .src('./dist') .pipe(webserver({ host: 'localhost', // 配置打开浏览器的域名 port: 3000, // 配置打开浏览器的端口号 livereload: true, // 自动刷新浏览器 open: './pages/index.html' // 默认打开 dist 文件夹下的哪个文件 }))}) // 7. 改写 default 任务gulp.task('default', function () { // 里面的每一个参数都可以是一个任务或者一个任务队列 // 再执行任务的时候，会把前一个任务队列完成的情况下再执行下一个任务队列 runSequence( 'clean', ['css', 'sass', 'js', 'html', 'lib', 'static'], 'webserver')}) 因为我们打开浏览器应该再所有压缩任务都完成以后再把浏览器打开所以我们把他排在任务的第三个队列上这个webserver会自动帮我们启动一个服务器是一个node的服务器所以我们的页面也相当于是在服务器上打开的修改内容自动刷新我们刚才再配置webserver的时候有一个自动刷新的功能被我们开启了但是我们修改一些文件的时候发现并没有自动刷新这个是因为，我们只是开启了自动刷新，但是你修改文件以后并没有自动帮我们重新编译那么dist/文件夹下的内容就不会更改，那么刷新就没有意义所以我们应该再制作一个任务，当文件夹下的内容修改的时候，自动帮我们从新编译这个不需要任何依赖，我们只需要配置一个监控文件改变的任务就行了// 我是 gulpfile.js 文件// 1. 引入 gulpconst gulp = require('gulp')// 2-1. 引入 gulp-cssminconst cssmin = require('gulp-cssmin')// 2-2. 引入 gulp-autoprefixer const autoPrefixer = require('gulp-autoprefixer')// 2-3. 引入 gulp-sassconst sass = require('gulp-sass')// 3-1. 引入 gulp-uglifyconst uglify = require('gulp-urlify')// 3-2. 引入 gulp-babel// es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了const babel = require('gulp-babel')// 4. 引入 gulp-htmlminconst htmlmin = require('gulp-htmlmin')// 5. 引入 gulp-cleanconst clean = require('gulp-clean')// 6. 引入 run-sequenceconst runSequence = require('run-sequence')// 7. 引入 gulp-webserverconst webserver = require('gulp-webserver') // 2-1. 创建一个 css 的任务gulp.task('css', function () { return gulp .src('./src/css/**') .pipe(autoPrefixer({ browsers: ['last 2 versions'] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }) // 2-2. 创建一个 sass 任务gulp.task('sass', function () { return gulp .src('./src/sass/**') .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest('./dist/css'))}) // 3. 创建一个 js 任务gulp.task('js', function () { return gulp .src('./src/js/**') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify()) .pipe(gulp.dest('./dist/js'))}) // 4. 创建一个 html 任务gulp.task('html', function () { return gulp .src('./src/pages/**') .pipe(htmlmin({ removeEmptyAttibutes: true, // 移出所有空属性 collapseWhitespace: true // 压缩 html })) .pipe(gulp.dest('./dist/pages'))}) // 5. 创建一个 lib 任务gulp.task('lib', function () { return gulp .src('./src/lib/**') .pipe(gulp.dest('./dist/lib'))}) // 6. 创建一个 static 任务gulp.task('static', function () { return gulp .src('./src/static/**') .pipe(gulp.dest('./dist/static'))}) // 8. 创建一个 clean 任务gulp.task('clean', function () { return gulp .src('./dist') .pipe(clean())}) // 9. 创建一个 webserver 任务gulp.task('webserver', function () { return gulp .src('./dist') .pipe(webserver({ host: 'localhost', // 配置打开浏览器的域名 port: 3000, // 配置打开浏览器的端口号 livereload: true, // 自动刷新浏览器 open: './pages/index.html' // 默认打开 dist 文件加下的哪个文件 }))}) // 10. 创建一个 watch 任务gulp.task('watch', function () { gulp.watch('./src/css/**', ['css']) gulp.watch('./src/sass/**', ['sass']) gulp.watch('./src/js/**', ['js']) gulp.watch('./src/pages/**', ['html']) gulp.watch('./src/lib/**', ['lib']) gulp.watch('./src/static/**', ['static'])}) // 7. 改写 default 任务gulp.task('default', function () { // 里面的每一个参数都可以是一个任务或者一个任务队列 // 再执行任务的时候，会把前一个任务队列完成的情况下再执行下一个任务队列 runSequence( 'clean', ['css', 'sass', 'js', 'html', 'lib', 'static'], ['webserver', 'watch'])}) 因为再文件压缩完毕以后，我们就可以开始监控了所以把这个watch任务和webserver任务并行就可以了接下来我们就可以再命令行运行gulp了、 运行 gulp $ gulp这个时候，我们只要进行代码书写就可以了随着我们写完，会自动帮我们打包编译，并且自动进行浏览器刷新的使用 GULP 配置代理我们的gulp自动打包构建已经完成了我们的正常开发已经可以进行下去了我们就剩最后一个功能没有实现了那就是跨域请求的问题因为我们的项目中肯定有一些数据是向后台请求过来的那么我们就要发送请求我们又不能保重服务端接口和我们是同源的所以我们就要配置一个代理gulp给我们启动的这个服务器是node的服务器所以也可以直接配置代理不需要任何依赖，只要再webserver任务中多加一个配置就可以了gulp.task('webserver', function () { return gulp .src('./dist') .pipe(webserver({ host: 'localhost', port: 3000, livereload: true, open: './pages/index.html', proxies: [ // 配置所有代理 { // 其中一个代理配置 source: '/login', // 使用的关键字 target: 'http://localhost:80/login.php' // 代理的路径 } ] }))}) 这个时候你就可以正常发送请求了当你要请求代理地址的时候，只要再这里配置一下，使用代理关键字进行请求就可以了GULP完整配置文件（简单版）所有需要用到的依赖.gulp@3.9.1.gulp-cssmin.gulp-autoprefixer.gulp-sass.gulp-uglify.gulp-babel@7.0.1.babel-core.babel-preset-es2015.gulp-htmlmin.gulp-clean.run-sequence.gulp-webservergulpfile.js文件内容// 我是 gulpfile.js 文件const gulp = require('gulp')const cssmin = require('gulp-cssmin')const autoPrefixer = require('gulp-autoprefixer')const sass = require('gulp-sass')const uglify = require('gulp-urlify')const babel = require('gulp-babel')const htmlmin = require('gulp-htmlmin')const clean = require('gulp-clean')const runSequence = require('run-sequence')const webserver = require('gulp-webserver')gulp.task('css', function () { return gulp .src('./src/css/**') .pipe(autoPrefixer({ browsers: ['last 2 versions'] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }) gulp.task('sass', function () { return gulp .src('./src/sass/**') .pipe(sass()) .pipe(autoPrefixer()) .pipe(cssmin()) .pipe(gulp.dest('./dist/css'))}) gulp.task('js', function () { return gulp .src('./src/js/**') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify()) .pipe(gulp.dest('./dist/js'))}) gulp.task('html', function () { return gulp .src('./src/pages/**') .pipe(htmlmin({ removeEmptyAttibutes: true, collapseWhitespace: true })) .pipe(gulp.dest('./dist/pages'))}) gulp.task('lib', function () { return gulp .src('./src/lib/**') .pipe(gulp.dest('./dist/lib'))}) gulp.task('static', function () { return gulp .src('./src/static/**') .pipe(gulp.dest('./dist/static'))}) gulp.task('clean', function () { return gulp .src('./dist') .pipe(clean())}) gulp.task('webserver', function () { return gulp .src('./dist') .pipe(webserver({ host: 'localhost', port: 3000, livereload: true, open: './pages/index.html', proxies: [ { source: '/login', target: 'http://localhost:80/login.php' } ] }))}) gulp.task('watch', function () { gulp.watch('./src/css/**', ['css']) gulp.watch('./src/sass/**', ['sass']) gulp.watch('./src/js/**', ['js']) gulp.watch('./src/pages/**', ['html']) gulp.watch('./src/lib/**', ['lib']) gulp.watch('./src/static/**', ['static'])}) gulp.task('default', function () { runSequence( 'clean', ['css', 'sass', 'js', 'html', 'lib', 'static'], ['webserver', 'watch'])})
