• gulp入门


    gulp:是一个自动化工具,前端开发者可以使用它来处理常见任务:

    • 搭建web服务器
    • 文件保存时自动重载浏览器
    • 使用预处理器如Sass、LESS
    • 优化资源,比如压缩CSS、JavaScript、压缩图片

    今天这篇是一个入门,如何搭建gulp。

    1. 安装node.js

    首先它是基于node.js环境下的。点击下载。

    需要注意的是系统版本32/64位。

    安装好node.js后,win键+R打开cmd命令控制台输入 node -v 如果显示版本号,说明安装成功。

          2.安装cnpm

    尽管node.js自带了cpm但是不会翻墙的孩纸们一定不愿意看到红色的错误提示。我们还是老老实实的安装马云爸爸提供的cnpm吧。

    官方网址:http://npm.taobao.org

    win键+R打开命令控制台输入 npm install cnpm -g --registry=https://registry.npm.taobao.org

    安装完后最好查看其版本号 cnpm -v 如果报错,关闭命令控制台重新打开查看,因为有时候会报错。

    有了以上的环境,和工具,我们就可以安装gulp了。

          3.安装gulp-全局

    cmd命令控制台输入 cnpm install gulp -g 所有命令行在淘宝提供的官网都有可查。

    安装完成后检查 gulp -v

          4.创建package.json文件

    package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件。我们的项目里如果没有这个文件,nodejs不会识别。所以要有这个文件。

    • 首先在D盘创建一个名为www的文件夹,这就是我们的站点了。
    • 创建package.json方式有两种,一种是手写,一种是通过cnpm下载。
    • 下面就是文件内容,注意复制后一定要把注释删除掉,否则会报错。
    • {
        "name": "test",   //项目名称(必须)
        "version": "1.0.0",   //项目版本(必须)
        "description": "This is for study gulp project !",   //项目描述(必须)
        "homepage": "",   //项目主页
        "repository": {    //项目资源库
          "type": "git",
          "url": "https://git.oschina.net/xxxx"
        },
        "author": {    //项目作者信息
          "name": "surging",
          "email": "surging2@qq.com"
        },
        "license": "ISC",    //项目许可协议
        "devDependencies": {    //项目依赖的插件
          "gulp": "^3.8.11",
          "gulp-less": "^3.0.0"
        }
      }
      
    • 第二种我们可以使用命令创建
    • 打开D盘我们创建的www文件夹按着shift键并鼠标右击,找到“在此处打开命令窗口”。这时弹出来的就是当前路径下的cmd命令控制台了。
    • 我们输入cnpm init

    查看package.json帮助文档,命令控制台cnpm help package.json

          5.创建本地gulp和插件【重要】

    有了gulp插件,我们就可以操控web项目了。

    这里用一个less预处理插件,将我们写的less文件用插件转化成css文件。并且是实时同步的。

    • 在站点路径下打开cmd控制台,输入 cnpm install --save-dev 
    • 在站点路径下打开cmd控制台,输入 cnpm install gulp-less --seve-dev 该命令就是less插件
    • 在站点路径下打开cmd控制台,输入 cnpm install gulp --save-dev 关键命令!安装本地gulp
    • 全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。

     

          6.创建gulpfile.js【很重要】

    gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件。

    上图(1)站点内容部署

    上图(2)gulpflie.js

    const gulp=require('gulp');//初始化gulp工具
    const less=require('gulp-less');//初始化less插件
    
    gulp.task('gulpLess',function () {
       gulp.src('myweb/**/*.less')
           .pipe(less())
           .pipe(gulp.dest('websong'))
    });
    //写监听执行命令
    gulp.task('watch',function () {
       gulp.watch('myweb/**/*.less',['gulpLess']) ;
    });
    

    解释几个点:

    gulp.task()是创建动作的,相当于我们的函数。
    gulp.src()方法就是将指定的路径文件拿到
    pipe()方法就是连接的管道,文件从这里进入,一顿操作后从另一头输出到我们指定的一个地方。
    gulp.dest()就是我们指定的文件目录。
    gulp.watch()是监听,里面有两个参数,一个是监听的文件地址,
    一个是监听到后要执行的动作,这个动作,放在数组里,逗号隔开,可以写入多个动作(任务);
    目录里的**/*.*是node里的通配符
    通配符:
    1. *.scss*号匹配当前目录任意文件,所以这里*.scss匹配当前目录下所有scss文件
    2. **/*.scss:匹配当前目录及其子目录下的所有scss文件。
    3. !not-me.scss:!号移除匹配的文件,这里将移除not-me.scss
    4. *.+(scss|sass):+号后面会跟着圆括号,里面的元素用|分割,匹配多个
    7.执行gulp
    还是在wwww目录下,打开控制台,输入gulp 任务(动作)名称,这里是watch。
    如果想终止命令 ctrl+c 或关闭控制台。
    注意!任务执行后,控制台不可以关闭,否则没有效果哦

    ok。到了这里,入门就说结束了。

    更全更详细的可以参考这里,但是我这篇入门,是最适合小白不过了哦。

    后面还有其他插件的,别忘了回来~~~~


  • 相关阅读:
    Windows下给你mac下的开发体验 windows+wsl+zsh+vscode
    Puppeteer在docker下踩坑记录
    egret EUI加载 JSZip打包DragonBones二进制文件
    nodeJS rsasha加密
    Elasticsearch 聚合字段后 获取聚合字段的单条详细信息
    【转发自用】Apache2.4服务器权限设置问题
    C#重写VIVO支付SDK VivoSignUtils
    VS2017 空白 node.js web应用程序
    less开发
    获取样式getComputedStyle
  • 原文地址:https://www.cnblogs.com/webSong/p/6375177.html
Copyright © 2020-2023  润新知