gulp的入门必知

这次给大家带来gulp的入门必知,使用gulp的必知注意事项有哪些,下面就是实战案例,一起来看一下。

一、全局安装gulp
1、说明:全局安装gulp目的是为了通过她执行gulp任务;
2、安装:命令提示符执行

 npm install gulp -g

3、查看是否正确安装:命令提示符执行

gulp -v

出现版本号即为正确安装。
二、项目中安装gulp

 npm install –save-dev gulp

-注:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。
三、安装gulp某个模块(以gulp-less为例,编译less文件)

 npm install gulp-less –save-dev

四、新建package.json文件

npm init

根据提示进行填写项目信息。
五、在项目根目录下新建gulpfile.js文件,gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可),文件示例如下:

//导入工具包 require('node_modules里对应模块')var gulp = require('gulp'), //本地安装gulp所用到的地方    less = require('gulp-less');//定义一个testLess任务(自定义任务名称)gulp.task('testLess', function () {    gulp.src('src/less/index.less') //该任务针对的文件        .pipe(less()) //该任务调用的模块        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css});

登录后复制

gulp.task(‘default’,[‘testLess’, ‘elseTask’]); //定义默认任务 elseTask为其他任务,该示例没有定义elseTask任务//gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数//gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组)//gulp.dest(path[, options]) 处理完后文件生成路径

六、选装cnpm
1、说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”;
2、官方网址:http://npm.taobao.org;
3、安装:命令提示符执行npm install cnpm -g –registry=https://registry.npm.taobao.org
;  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

怎样实现node连接mysql的方法

JS的正则表达式如何使用

以上就是gulp的入门必知的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2783137.html

(0)
上一篇 2025年3月8日 16:44:46
下一篇 2025年3月8日 16:44:55

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • gulp用法快速记忆

    本篇文章讲述的是gulp的用法有哪些,我们该如何的快速的去记忆gulp的用法,大家对gulp的用法不太了解的同学我们可以一起来看看本篇文章! 行文步骤: 1、怎么安装 2、怎么使用 一、怎么安装 首先你得在自己的电脑中安装nodejs,应为…

    2025年3月8日
    200
  • Gulp命令生成精灵图

    这次给大家带来Gulp命令生成精灵图,Gulp命令生成精灵图的注意事项有哪些,下面就是实战案例,一起来看一下。 文件目录说明 gulpfile.js代码 var gulp = require(‘gulp’);var spritesmith …

    2025年3月8日
    200
  • Promise入门必知

    这次给大家带来Promise入门必知,Promise入门必知的注意事项有哪些,下面就是实战案例,一起来看一下。 Promise是异步编程的一种解决方案,从语法上说,Promise是一个对象,从它可以获取异步操作的消息。 Promise的基本…

    编程技术 2025年3月8日
    200
  • js基础入门函数

    本篇文章给大家介绍了关于js的基础入门函数,比较详细也比较基础,有需要的小伙伴可以看一下 1:函数方法: 函数:封装一段代码!这段代码实现某个功能,当需要这个功能的时候,去调用函数。 java: 修饰符返回类型 方法名(数据类型 变量名, …

    2025年3月8日 编程技术
    200
  • nodejs怎么实现gulp打包功能

    这次给大家带来nodejs怎么实现gulp打包功能,nodejs实现gulp打包功能的注意事项有哪些,下面就是实战案例,一起来看一下。 最近换了家新公司,由于是创业公司,项目基本从零开始搭建。工作几年,也没想过写点什么技术性的东西,今天突然…

    编程技术 2025年3月8日
    200
  • gulp安装+打包+合并最详解

    这次给大家带来gulp安装+打包+合并最详解,使用gulp安装+打包+合并的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发…

    编程技术 2025年3月8日
    200
  • jQuery入门须知总结

    这次给大家带来jQuery入门须知总结,jQuery入门须知的注意事项有哪些,下面就是实战案例,一起来看一下。 jQuery 对象 •jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 •jQuery 对象是 jQu…

    编程技术 2025年3月8日
    200
  • vuex入门教学步奏详解

    这次给大家带来vuex入门教学步奏详解,vuex入门的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,event bus 的成本反而比vuex还高, 所以技术…

    编程技术 2025年3月8日
    200
  • 如何使用NodeJS + Lighthouse + Gulp搭建自动化网站性能测试的工具

    这篇文章主要介绍了关于如何使用nodejs + lighthouse + gulp搭建自动化网站性能测试的工具,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 假设你还不知道Lighthouse是什么 Lighthouse 是…

    2025年3月8日
    200
  • 新手也能听懂的JavaScript面向对象编程入门

    javascript是一门网络编程语言,它可以使网站更加交互式、动态和响应式。随着javascript的不断发展,面向对象编程已经成为了javascript编程中的一个核心概念。然而,新手在学习这个概念时可能会感到困惑,因此本文将为大家介绍…

    编程技术 2025年3月7日
    200

发表回复

登录后才能评论