Node教程——Gulp前端构建工具-教程

、gulp教程

你一定安装完了gulp，接下来我来教你如何使用它

(一)、 基础的使用步骤

1.在本地根目录下建立gulpfile.js文件
2.重构项目的文件夹结构 src文件夹下的dist文件夹里面就是重构之后的源码
3.在gulpfile.js中编写执行的任务
4.在命令行中执行gulp任务

实操代码

• 首先我们看一下我的文件夹结构

特别提示：我们的dist目录是空的。src是我的源代码吗，每一天文件夹的作用相比你们都知道我就不多说了

• 开始编写任务
  gulp.task() 建立任务

做任务要使用的最常见的几个方法：
gulp.src()：获取任务要处理的文件
注意：我们处理的时候都是在内存里面处理的，处理完之后我们要dest()方法写到指定的文件夹下
gulp.dest() 输出文件
gulp.watch() 监控文件的变化

代码实例

//  pipe是管道的意思，你可以理解为’处理‘的意思，在pipe中你可以做指定的文件处理方式，这个非常的重要！
// 1.引入模块
const gulp = require('gulp');
//2.编写任务 
gulp.task('first', () => {
   console.log('人生中的第一个gulp任务执行了');
   // 1.使用gulp.src获取要处理的文件
   gulp.src('./src/css/base.css')
       .pipe(gulp.dest('dist/css')); //dest是对文件处理的一种操作，意思是输出
});

代码写完了，我们要怎么执行？
答案：使用命令行工具，你需要去安装它npm install gulp-cli -g 进行全局安装

安装完毕之后 在命令行下：gulp first,这样gulp就会自动去找gulpfile.js文件里的first任务

(二)、 有没有更多的骚操作？

由于gulp是一个轻量级的，没有太多的操作，因此我们需要下载很多插件，通过插件我们可以执行更多的骚操作

1. 我们先列举一下常见的几个插件
   gulp-htmlmin:html压缩
   gulp-csso:css压缩
   gulp-babel:es6转化到es5
   gulp-less:处理less
   gulp-uglify：压缩混淆js
   gulp-file-include：公共文件夹包含
   gulp-browsersync:浏览器热更新

2. 如何使用这些插件？

虽然插件总是眼花缭乱 ，但是使用还是非常简单的，遵守下面的操作就完事
1.npm下载它
2.gulpfile.js里引入第三方插件
3.调用对应的插件

3. （编写任务）压缩html的任务
   1.编写任务：压缩html文件
   npm install gulp-htmlmin下载这个插件

// 引入，关于引入的语法可以在官网的文档里找到，建议赋值粘贴
const htmlmin = require('gulp-htmlmin');

//开始编写任务

// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
    //注意我们选择所有html文件
    gulp.src('./src/*.html').pipe(htmlmin({ collapseWhitespace: true })).pipe(gulp.dest('dist'))
        //注意了 我们使用的两个pipe 第一个pipe是操作压缩文件，第二个是操作文件放到哪儿
})

命令行：gulp htmlmin

4. （编写任务）抽取html中的公共代码
   1.下载插件
   npm install gulp-file-include

开始编写任务
const fileinclude = require('gulp-file-include');

//1。注意我们的需求是，先抽取再压缩
//2.在dist下创建一个commt目录 ，里面存放我们的公共html
//3.在src里面把两个页面的公共的头部抽取出来放到commont下的一个header文件里面，再用@@include(‘./comont/hedaer.html')在原来的地方，就可以引回来了

// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
    //注意我们选择所有html文件
    gulp.src('./src/*.html').pipe(fileinclude())

    .pipe(htmlmin({ collapseWhitespace: true })).pipe(gulp.dest('dist'))
        //注意了 我们使用的两个pipe 第一个pipe是操作压缩文件，第二个是操作文件放到哪儿
})

再去命令行gulp htmlmin就完事

5. （编写任务）转换less还有压缩css
   1.下载npm install gulp-less,
   下载 npm install gulp-csso

开始编写任务

//引入
const less = require('gulp-less');
const csso = require('gulp-csso');


// css任务
// 1.less语法转换
// 2.css代码压缩
gulp.task('cssmin', () => {
    // less()就是一个方法，一个函数用了它就能做到你想要的效果
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        .pipe(less())
        .pipe(csso())
        .pipe(gulp.dest('dist/css'))
        //同时处理多个文件夹,字节在目录后跟上就行了，注意你要加上【】号
})

//注意啊：我的pipe是一个同步的操作

6.（编写任务） 编写任务es6转换后的压缩
1.下载npm install --save-dev gulp-babel @babel/core @babel/preset-env
如何一次下载多个模块？空格隔开就行了 ，后面的都是gulp-babel依赖的其它模块
npm install gulp-uglify,

const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', () => {
    //这里的这个参数是说把点名转化成你当前运行环境下的代码
    gulp.src('./src/js/*.js').pipe(babel({ presets: ['@babel/env'] }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
})

7. （编写任务）拷贝文件夹

// 复制文件夹
gulp.task('copy', () => {
    gulp.src('./src/images/*').pipe(gulp.dest('dist/images'));
    gulp.src('./src/lib/*').pipe(gulp.dest('dist/lib'))
})

8. （编写任务）把所有的任务都结合在一起

gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

命令行就default就行了,注意啊default是可以省略的，也就是说 你直接gulp就完事了

这些就是使用的套路

三、 Node的一些细节

(一)、 详解package.json 项目依赖

依赖呢。主要是两种一个是项目依赖一个是开发依赖
1.项目依赖是必须的
2.开发依赖是开发的时候使用的

npm install 包名 --save-dev这个dev就会把这个包添加到json文件的

    "dependencies": {
        "formidable": "^1.2.1",
        "mime": "^2.4.4"
    },

选项中，以此来区分到底是哪种依赖

package-lock.json
的作用：锁定版本 加快下载速度

如何使用别名？在package.json 下加一个选项

{
    "name": "description",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build":"nodemon app.js"
    },

然后在命令行下npm run 就会自动的执行nodemon app.js代码就ok了，

(二)、 node中的模块查找规则

主要有三种

1. 当模块有路径没有后缀的时候
   require('./find')
   先在同级下查找find文件夹
   如果找到了就去文件夹下找index.js 如果文件夹下没有index.js就去当前文件夹下的packge.json找main选项中指定的入口文件 如果还是没有就报错

2. 没有路径有没有后缀怎么办？
   Node会假设它是系统模块
   在去node_moulde找同名js文件
   如果没有再去找同名的文件夹 ，如何在文件夹下找index.js如果没有index.js
   就去packge.json找main选项中指定的入口文件 如果还是没有就报错