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

、gulp教程

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

(一)、 基础的使用步骤

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

实操代码

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

Node教程——Gulp前端构建工具-教程_第1张图片

特别提示:我们的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.调用对应的插件

  1. (编写任务)压缩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

  1. (编写任务)抽取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就完事

  1. (编写任务)转换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'))
})
  1. (编写任务)拷贝文件夹
// 复制文件夹
gulp.task('copy', () => {
    gulp.src('./src/images/*').pipe(gulp.dest('dist/images'));
    gulp.src('./src/lib/*').pipe(gulp.dest('dist/lib'))
})

  1. (编写任务)把所有的任务都结合在一起
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选项中指定的入口文件 如果还是没有就报错

你可能感兴趣的:(Node教程——Gulp前端构建工具-教程)