《nodejs+gulp+webpack基础实战篇》课程笔记(二)--gulp速度上手

速度上手,执行我们第一个任务

  gulp,目前前端开发最火爆的工具之一。

  我们先在项目目录中创建一个package.jsonwen文件:项目目录下运行node

npm init

  安装gulp之前,我们先了解下 npm instal -g这个命令:

  如果不加-g 则会安装到当前项目目录下。加上-g 就会安装一个全局目录里。

   我们可以通过npm config get prefix  查看全局目录是什么。也可以通过npm config set prefix “目录路径”  来自行设置。

  一般来说,工具性模块且我们需要在任意目录都想使用的工具请使用全局安装。

  OK,现在我们来安装gulp,安装gulp两个方式,

1、npm install -g gulp 
2、npm install gulp --save-dev  //(在当前项目也要装一次,因为过会我们要 require(“gulp”)。

  (--save-dev 是你开发时候依赖的库,--save 是你发布之后还依赖的库)

  安装完成后我们的项目目录下会生成:

  

  这个gulp文件夹,此处备注一个:如果我们把这个文件夹删掉,在NODE中执行npm install,node会自动帮我们修复下载这个缺失的插件。

  OK,安装到处结束:

  

  接着我们来创建一个配置文件,保证gulp正常的运行。新建一个file,取名gulpfile.js.

/* gulp.task(‘任务名’,function(){
*  //这里执行一些事
*  });
**/
var gp = require("gulp");
gp.task("xiaozu",function(){
    console.log("i am gulp");
});

  然后打开终端,执行gulp 任务名.它会自动读取你的 配置文件,执行你的任务

  



  项目做到后面,文件存放“越来越乱”。我们经常会碰到,队友在项目目录下随便编写JS文件。 那么,作为项目组长,往往我们要“归类” 然而,手工拷贝?逗我呢?

  我们先把一些基础概念撸一撸,

  gulp.src([文件1,文件2,文件3]),用来”收集”源文件形成“虚拟文件对象流”,然后通过“管道”函数pipe传给它另外一个写文件的函数dest.

  在命令行中读取文件并显示在屏幕上 :

  Windows 下[type 文件名]、 Linux[cat 文件名]

  查找字符串并列出内容:

  windows [findstr 关键字 文件名]  Linux [grep 关键字 文件名]

  如果我要在某个文件中根据关键词查询,那么两者命令就可以通过管道(pipe)的方式组合使用。管道符 “|”

  Windows type 文件名 | findstr 关键词 文件名

  Linux cat 文件名 | grep 关键词 文件名

重点:Gulp里面管道的用法 

gulp.src([“1.js”,”2.js”].pipe(gulp.dest(“文件夹名”)) ;
gulp.src([“*.js”,”!2.js”].pipe(gulp.dest(“文件夹名”)) //!是排除的意思

  我们在上面提到的gulpfile.js按下面这个写法,将css、js分类.放到build文件夹中

var gp = require("gulp");
gp.task("xiaozu",function(){
    gp.src([‘*.js‘,‘!guplfile.hs‘]).pipe(gp.dest(‘./build/js‘));
    gp.src([‘*.css‘]).pipe(gp.dest(‘./build/css‘));
});

  在node中执行 gulp 任务名,结果我们可以看到在build中就自动生成了2个分类。

  

  当然,你也不用担心,gulp只是复制你匹配的文件,不会删除原文件。


  

时间: 2024-10-12 20:45:20

《nodejs+gulp+webpack基础实战篇》课程笔记(二)--gulp速度上手的相关文章

《nodejs+gulp+webpack基础实战篇》课程笔记(四)-- 实战演练

一.用gulp 构建前端页面(1)---静态构建 npm install gulp-template --save-dev 通过这个插件,我们可以像写后台模板(譬如PHP)一样写前端页面.我们首先学习一下写法. 现在我们创建一个新任务:创建一个裸的index.html文件,然后在body里面写上 ,我的年龄是:<%= age %> 下载好gulp-template,我们引用并配置 var gulp_tpl = require("gulp-template"); gp.tas

《nodejs+gulp+webpack基础实战篇》课程笔记(七)--利用gulp自动完成配置&quot;吐&quot;给webpack执行

首先,我们利用gulp将入口文件自动化.我们参考该课程的规则,对文件需要成为入口的文件进行一个归类和整理. 首先,我们已经建立了SRC文件夹.在SRC文件下,创建一个主文件夹叫modules.同事创建几个子文件夹,创建的基本规则是:文件夹名就代表了我们的入口节点名. (此图仅供参考,文件夹名与文件名可自定义) 然后我们来到gulpfile.js,写入一个任务,在gulpfile中遍历modules文件夹里的文件夹和子文件(为了演示方便,我们默认遍历2级.第一级必须是文件夹名.第二级必须是js文件

《nodejs+gulp+webpack基础实战篇》课程笔记(八)--模板化开发演练:分离公共头文件

还是先来安装本课需要的插件: npm install raw-loader --save-dev //示例:var header = require("xxx.html");就会把html的内容读取出来 这是一个webpack加载器,可以把文件原样返回为字符串. 这里补充下使用加载器的两种方法: 1.在我们的webpack配置文件中写上 {test:/\.html$/,loader:"加载器名称"} //这代表所有html后缀均会使用这个加载器来处理 2.在requ

《nodejs+gulp+webpack基础实战篇》课程笔记(三)--webpack篇

webpack引入 前面我们简单学习了gulp,这时一个前端构建框架---webpack产生了(模块打包) 它能帮我们把本来需要在服务端运行的JS代码,通过模块的引用和依赖打包成前端可用的静态文件.(这里有需要了解一下CommonJS规范,具体请自行查看http://commonjs.org). 安装webpack: npm install -g wabpack //这里我们采用全局安装,保证每个项目中都能使用到 设置配置文件:  在项目目录下,新建一个webpack.config.js文件 m

《nodejs+gulp+webpack基础实战篇》课程笔记(六)--附加课

一.多页面分离资源引用,按需引用JS和css 我们前面实现了以下功能:1.新建了一个login模版(用到htmlWebpackPlugin).2.分别把main.js和login.js.reg.js分开写.3.学习了css加载器.我们通过webpack可以打包js文件.自动注入js和CSS引用. 那么我们要加载多页面如何操作呢?现在我们就在/src/tpl 文件夹下新件一个index.html文件,在CSS加入index.css,随便写两个样式,然后在/src/下新建一个index.js,随便写

《nodejs+gulp+webpack基础实战篇》课程笔记(五)-- 实战演练,构建用户登录

一.用gulp +webpack构建登录页面(1):简单构建 我们做项目经常要做的“百搭”页面 登录页面 ,它的基本要素如下: 1.页面展示要素 2.基本脚本判断 3.后端交互. 在项目根目录下创建 src(有逼格的名称) --tpl (代表是模板) --login.html(后缀随意) 注意,一旦发布到生产环境, 以上文件是不需要上传到服务器上的. <!--src/tpl/login.html--> <!DOCTYPE html> <html lang="en&q

C#基础知识篇---------C#笔记

   一.变量         1.什么叫做变量?            我们把值可以改变的量叫做变量.          2.变量的声明:            语法:[访问修饰符] 数据类型 变量名; 如: int number=10://声明了一个整型的变量number.            注意:一次声明多个变量之间要用逗号分隔.                  如:int number1,number2,number3....;          3.变量的赋值:        

MySQL的初次见面礼基础实战篇

[版权申明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) http://blog.csdn.net/javazejian/article/details/61614366 出自[zejian的博客] 本篇将以最简单的方式呈现并演绎mysql数据库的必知必会的知识点,通过本篇博文您将会对mysql从起点到终点的较为全面的认识,关于mysql的知识,将分两篇来记录,即MySQL的基础实战篇和MySQL的进阶实战篇,以下是本篇的主要知识点. 基础实战篇 环境准备 数据库与表的创建以及SQL增

Capabilities 入门教程:基础实战篇

该系列文章总共分为三篇: Linux Capabilities 入门教程:概念篇 Linux Capabilities 入门教程:基础实战篇 待续... 上篇文章介绍了 Linux capabilities 的诞生背景和基本原理,本文将会通过具体的示例来展示如何查看和设置文件的 capabilities. Linux 系统中主要提供了两种工具来管理 capabilities:libcap 和 libcap-ng.libcap 提供了 getcap 和 setcap 两个命令来分别查看和设置文件的