gulp相关知识

Posted 2020-07-28 起个好名字

将之前的东西的理论部分整理了一下——

gulp 前端构建工具 它可以帮助我们完成一些自动化操作

它需要一些插件的支持

var gulp = require(‘gulp‘); --> gulp命令

require(‘yargs‘).argv;
它可以监听gulp后面添加的参数

关闭 gulp 服务器： 执行 ctrl + c
var less = require(‘gulp-less‘); -->> less预处理器，目的就是把 .less文件转换成普通css文件
var header = require(‘gulp-header‘);

var minify = require(‘gulp-minify-css‘);
把css文件压缩

var autoprefixer = require(‘gulp-autoprefixer‘);
自动增加css3前缀

var rename = require(‘gulp-rename‘);

var sourcemaps = require(‘gulp-sourcemaps‘);

var browserSync = require(‘browser-sync‘);
//这个插件就是同步刷新浏览器所会用到插件
var uglify = require(‘uglifyify‘);

var concat = require(‘gulp-concat‘);
//这个插件 作用 把A.JS b.JS c.JS 自动的合并成同一个js文件

 

gulp目录结构
根本目的：在于关注度分离
dist --> 网页发布到服务器所需要目录（只关心最后的发布环境）
src --> 开发者在开发时 所会使用到的目录（只关心开发环境）
node_modules --> 自动化工具所需要插件依赖集合文件

gulp 基础使用：
需要nodejs的支持
安装：
1. npm install -g gulp
2. npm install -save-dev gulp
若都安装成功， 你才可以直接运行 gulp命令

若都失败： node "node_modules\gulp\bin\gulp.js" --> gulp

假设你现在需要gulp中的less预处理器插件，首先你需要安装
npm install -save-dev gulp-less
装好之后，你需要引入它，执行
var less = require(‘gulp-less‘);

gulp执行环境有一个统一标准，都只能在gulpfile.js里执行

gulp里在组织中最核心的东西叫做 task
gulp gongyifeng
语法：
gulp.task("gongyifeng", function(){
console.log(‘gongyifeng‘)
})

gulp.task("task_one", function(){
console.log(‘task_one‘)
})

gulp.task("task_two", function(){
console.log(‘task_two‘)
})

gulp.task("task_three", [‘task_one‘, ‘task_two‘], function(){
console.log(‘task_three‘)
})

gulp 它会执行一个默认任务名字 叫做 default

gulp.watch //gulp的监听操作，它可以监听文件的改变，之后完成一些事

语法：
gulp.watch(‘src/index.html‘, [‘task_three‘]);
意思就是： 当发现src/index.html的内容发生改变是，执行task_three里面的内容

gulp里在设计中最核心的东西叫做流 （stream）

河流 所流向的位置 是 由 gulp.dest(c:/project) 所决定的
var option = {base: ‘src‘};
var dist = __dirname + ‘/dist‘;

在node.js环境下有一些特殊的变量，其中内部有一个变量：__dirname：
__dirname： 当前目录所在的位置 它现在等价于C:\techerFolder\gulp/

现在河流流向 C:\techerFolder\gulp/dist

当你需要让河流（文件流）流入到一个具体位置的时候， 你需要找到河流的发源地，那么通过什么去找呢？

答案是：
gulp.src(发源地)
pipe（流动）
gulp.dest(‘C:\techerFolder\gulp/dist‘) 流入的目的地

gulp.src -- > gulp里固有的方法--》找到河流发源地（文件流）
gulp.src(‘src/index.html‘).pipe()

gulp.src(‘src/example/**/*‘)
gulp.src(‘src/example/**/*.!(less)‘, option)
.pipe(gulp.dest(dist))
.pipe(browserSync.reload({stream: true}));

到这里 gulp经常被使用到语法就介绍完毕

现在我们讲解 gulp里 在前端领域里它的作用

我们可以用开源插件去辅助我们的前端开发

第一个gulp插件 --> gulp-concat 合并对应的文件，目的就是：
让我们能在开发环境中，很好的进行模块的划分；