UndefineOrNull 2019-07-01
项目构建包括如下内容:
我们对平时开发的代码区分了两种环境:
开发环境 development
生产环境 production
而我们使用的库也分为两种依赖:
开发依赖 devDependencies
生产依赖 dependencies
开发套路:
准备工作:创建js文件
下载插件:
配置编码
const gulp = require('gulp'); const eslint = require('gulp-eslint'); // 语法检查 必须有一个eslint的配置文件 gulp.task('eslint', function () { // 读取所有的js文件, 返回值就是一个可读流 return gulp.src(['src/js/*.js']) // 对流中的文件/数据进行语法检查 .pipe(eslint()) .pipe(eslint.format()) .pipe(eslint.failAfterError()) .pipe(livereload()); })
在package.json中配置eslint的检查项
"eslintConfig": { "parserOptions": { "ecmaVersion": 7, "sourceType": "module", "ecmaFeatures": { "module": true } } } //package.json文件内容,eslint的检查项放置位置 "author": "", "license": "ISC", "dependencies": {}, "devDependencies": {}, "eslintConfig": { "parserOptions": { "ecmaVersion": 7, "sourceType": "module", "ecmaFeatures": { "module": true } } }
gulp eslint
下载插件:
配置编码
const babel = require('gulp-babel'); // babel能将es6模块化语法转换为commonjs模块化语法 // 能将es6及其以上的语法转换为es5及其以下的语法 gulp.task('babel', () => // 读取所有js文件 gulp.src('src/js/*.js') // 进行语法转换 .pipe(babel({ presets: ['@babel/preset-env'] //此处需要修改,官网有误 })) // 输出出去,输出路径 .pipe(gulp.dest('build/js')) );
gulp babel
下载插件:
配置编码
const browserify = require('gulp-browserify'); const rename = require("gulp-rename"); //重命名文件,为了不与babel产生的文件命名起冲突,可以保留banel产生的js文件 gulp.task('browserify', function() { // 只要放入口文件 return gulp.src('build/js/app.js') .pipe(browserify()) // 重命名文件 .pipe(rename("built.js")) .pipe(gulp.dest('build/js')) });
gulp browserify
下载插件:
配置编码
const uglify = require('gulp-uglify'); const rename = require('gulp-rename'); gulp.task('uglify', function() { return gulp.src('./build/js/built.js') .pipe(uglify()) .pipe(rename('dist.min.js')) .pipe(gulp.dest('./dist/js/')) }); gulp.task('js-prod', gulp.series('js-dev', 'uglify')); //顺序执行
gulp js-prod
准备工作:创建less文件
下载插件:
配置编码
const less = require('gulp-less'); gulp.task('less', function () { return gulp.src('./src/less/*.less') .pipe(less()) .pipe(gulp.dest('./build/css')) });
gulp less
下载插件
配置编码
//第一种方案,采用gulp-clean-css const cleanCSS = require('gulp-clean-css'); const LessAutoprefix = require('less-plugin-autoprefix'); const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] }); const connect = require('gulp-connect');合并css文件 gulp.task('css', function () { return gulp.src('./src/less/*.less') .pipe(less({ plugins: [autoprefix] //自动扩展样式的兼容性前缀 })) //将less文件转换成css文件 .pipe(concat('dist.min.css')) //合并css文件 .pipe(cleanCSS({compatibility: 'ie8'})) //压缩css文件 .pipe(gulp.dest('./dist/css')) }); //第二种方案,采用gulp-cssmin const cssmin = require('gulp-cssmin');合并css文件 const LessAutoprefix = require('less-plugin-autoprefix'); const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] }); //与LessAutoprefix相配合,使用autoprefixer从less转换后为css添加前缀,因为有些浏览器对一些带有前缀的css才能识别 const connect = require('gulp-connect'); gulp.task('css', function () { return gulp.src('./src/less/*.less') .pipe(concat('dist.min.css')) .pipe(less({ plugins: [autoprefix] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) });
gulp css
下载插件:
配置编码
var htmlmin = require('gulp-htmlmin'); //压缩html任务 gulp.task('html', () => { return gulp.src('src/*.html') .pipe(htmlmin({ collapseWhitespace: true, // 去除空格 removeComments: true // 去掉注释 })) .pipe(gulp.dest('dist')); });
修改页面引入
<link rel="stylesheet" href="css/dist.min.css"> <script type="text/javascript" src="js/dist.min.js"></script>
gulp html
下载插件
配置编码:
const livereload = require('gulp-livereload'); //所有的任务最后加上 .pipe(livereload()) 这条代码决定自动编译哪个任务 gulp.task('watch', function() { livereload.listen(); gulp.watch('src/less/*.less', gulp.series('less')); gulp.watch('src/js/*.js', gulp.series('js')); });
gulp watch
下载插件
配置编码
// 自动化 --> 自动编译 --> 自动刷新浏览器(热更新) --> 自动打开浏览器 gulp.task('watch', function() { livereload.listen(); // 开启服务器 connect.server({ name: 'Dev App', root: ['build'], //提供服务的根路径 port: 3000, //开启端口号 livereload: true //是否实时刷新 }); // 自动打开浏览器,开启链接 open('http://localhost:3000'); // 监视指定文件,一旦文件发生变化,就执行后面的任务 gulp.watch('src/less/*.less', gulp.series('less')); gulp.watch('src/js/*.js', gulp.series('js-dev')); });
gulp watch
// gulp.series()同步顺序执行,同一时间只能执行一个任务 速度慢 // gulp.parallel()异步执行,同一时间执行多个任务 速度快 gulp.task('js-dev', gulp.series('eslint', 'babel', 'browserify')); gulp.task('js-prod', gulp.series('js-dev', 'uglify')); gulp.task('build', gulp.parallel('js-dev', 'less')); // 生产环境的指令: gulp prod gulp.task('prod', gulp.parallel('js-prod', 'css', 'html')); // 开发环境的指令: gulp start gulp.task('start', gulp.series('build', 'watch'));
// 引入gulp const gulp = require('gulp'); const eslint = require('gulp-eslint'); const babel = require('gulp-babel'); const browserify = require('gulp-browserify'); const rename = require("gulp-rename"); const less = require('gulp-less'); const livereload = require('gulp-livereload'); const connect = require('gulp-connect'); const open = require("open"); const uglify = require('gulp-uglify'); const LessAutoprefix = require('less-plugin-autoprefix'); // https://github.com/browserslist/browserslist const autoprefix = new LessAutoprefix({ browsers: ["cover 99.5%", "not dead"] }); const cssmin = require('gulp-cssmin'); const concat = require('gulp-concat'); const htmlmin = require('gulp-htmlmin'); // 语法检查 必须有一个eslint的配置文件 gulp.task('eslint', function () { // 读取所有的js文件, 返回值就是一个可读流 return gulp.src(['src/js/*.js']) // 对流中的文件/数据进行语法检查 .pipe(eslint()) .pipe(eslint.format()) .pipe(eslint.failAfterError()) .pipe(livereload()); }) // 语法转换 // babel能将es6模块化语法转换为commonjs模块化语法 // 能将es6及其以上的语法转换为es5及其以下的语法 gulp.task('babel', () => // 读取所有js文件 gulp.src('src/js/*.js') // 进行语法转换 .pipe(babel({ presets: ['@babel/preset-env'] //此处需要修改,官网有误 })) // 输出出去 .pipe(gulp.dest('build/js')) .pipe(livereload()) ); // 将commonjs的模块化语法转换成浏览器能识别语法 gulp.task('browserify', function() { // 只要放入口文件 return gulp.src('build/js/app.js') .pipe(browserify()) // 重命名文件 .pipe(rename("built.js")) .pipe(gulp.dest('build/js')) .pipe(livereload()); }); // 压缩js代码 gulp.task('uglify', function () { return gulp.src('./build/js/built.js') .pipe(uglify()) .pipe(rename('dist.min.js')) .pipe(gulp.dest('dist/js')) }) // 将less编译成css gulp.task('less', function () { return gulp.src('./src/less/*.less') .pipe(less()) .pipe(gulp.dest('./build/css')) .pipe(livereload()); }); // 压缩css gulp.task('css', function () { return gulp.src('./src/less/*.less') .pipe(concat('dist.min.css')) .pipe(less({ plugins: [autoprefix] })) .pipe(cssmin()) .pipe(gulp.dest('./dist/css')) }); // 压缩html gulp.task('html', () => { return gulp.src('src/*.html') .pipe(htmlmin({ collapseWhitespace: true, // 去除空格 removeComments: true // 去掉注释 })) .pipe(gulp.dest('dist')); }); // 自动化 --> 自动编译 --> 自动刷新浏览器(热更新) --> 自动打开浏览器 gulp.task('watch', function() { livereload.listen(); // 开启服务器 connect.server({ name: 'Dev App', root: ['build'], port: 3000, livereload: true //热更新 }); // 打开浏览器 open('http://localhost:3000'); // 监视指定文件,一旦文件发生变化,就执行后面的任务 gulp.watch('src/less/*.less', gulp.series('less')); gulp.watch('src/js/*.js', gulp.series('js-dev')); }); // 配置默认任务 --> 执行以上多个任务 gulp.task('js-dev', gulp.series('eslint', 'babel', 'browserify')); gulp.task('js-prod', gulp.series('js-dev', 'uglify')); // gulp.task('default', gulp.parallel('eslint', 'babel', 'browserify')); gulp.task('build', gulp.parallel('js-dev', 'less')); // 生产环境的指令: gulp prod gulp.task('prod', gulp.parallel('js-prod', 'css', 'html')); // 开发环境的指令: gulp start gulp.task('start', gulp.series('build', 'watch'));