gulp的安装与配置执行
1.首先新建一个项目目录;
2.在项目目录下新建一个src的目录;
3.新建一个gulpfile.js;
配置gulp环境:
1.首先确认电脑是否装有gulp
gulp -v;
2.安装
cnpm install --global gulp-cli
3.安装gulp作为开发时的依赖项
npm install --save-dev gulp
4.检查
gulp -v;
若看到
若看到两个版本号,说明gulp安装成功了
CLI version:2.2.0
Local version:4.0.2
gulpfile.js下的gulp的配置:
//先引用gulp模块
const {src,dest} = require("gulp");
//1.定义一个默认任务
function defaultTask(cb){
console.log("这是我第一个gulp任务");
cb();
}
//将任务名暴露出去
//gulp 任务名(在命令窗口执行),启动gulp任务
exports.defaultTask = defaultTask;
//2.定义一个复制HTML文件的任务
function copyHtml(){
return src("./src/**/*.html")
.pipe(dest("./dist"))
}
exports.copyHtml = copyHtml;
安装gulp-sass,node-sass
(npm安装node-sass)
1.使用淘宝镜像进行安装(命令窗口)
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
2.安装node-sass和gulp-sass
npm install node-sass gulp-sass --save-dev
在gulpfile.js文件下配置运行:
// 定义scss转为css任务
const sass = require("gulp-sass");
sass.compiler = require("node-sass");
function scssTocss(){
return src("./src/scss/**/*.scss")
.pipe(sass().on("error",sass.logError))
.pipe(dest("./src/css/"))
}
exports.scssTocss = scssTocss;
安装gulp-uglify,gulp-babe,readable-stream
gulp-uglify压缩项目的js文件:
npm install --save-dev gulp-uglify
gulp-babel用于ES6转为ES5:
Babel 7
npm install --save-dev gulp-babel @babel/core @babel/preset-env
Babel 6
npm install --save-dev gulp-babel@7 babel-core babel-preset-env
一般安装最新的版本,如果安装有cnpm的话,直接使用cnpm安装,国内的没那么坑
readable-stream用于可读流,方便编写:
npm install --save readable-stream
实例:
var uglify = require("gulp-uglify");
// es6的代码转为es5的代码 ,gulp-babel的作用
var babel = require("gulp-babel");
var pipeline = require("readable-stream").pipeline;
// js代码的编译
function uglify_js(cb){
return pipeline(
src('./src/**/*.js'),
babel({
presets:['@babel/env']
}),
uglify(),
dest('dist')
);
}
exports.uglify_js = uglify_js;
安装browser-sync引进服务器,实现热更新
browser-sync(安装地址:http://www.browsersync.cn/)找到gulp文件
npm install browser-sync gulp --save-dev
示例:
var browserSync = require('browser-sync').create();
function bs(cb){
cb();
browserSync.init({
server:{
baseDir:"./src"
},
files:["./src/**/*.html","./src/js/**/*.js","./src/css/**/*.css"],
port:8888 //指定端口号
})
watch("./src/scss/**/*.scss",scss2css);
}
// 开发环境
exports.bs = exports.dev = bs;
将scss编译成css,并且压缩,输出到dist文件夹中
function scss2dist(){
return src("./src/scss/**/*.scss")
.pipe(sass({outputStyle:'compressed'}).on("error",sass.logError))
.pipe(autoprefixer({
cascade:false
}))
.pipe(dest("dist/css"))
}
// 生产环境
// 同步打包 series 先执行1,再执行2
// exports.bulid = exports.pro = series(copyHtml,scss2dist,uglify_js);
// 异步打包 parallel 1,2同时进行
exports.build = exports.pro = parallel(copyHtml,scss2dist,uglify_js);
//当拿到别人的代码gulp处理过的项目代码,直接在项目的更目录下,打开cmd命令窗口,输入cnpm install,
就会把所有的依赖项安装出来