基于gulp+sass+jquery完成一个完整的电商项目

本文主要介绍模块使用

逆战班带你看

自动化构建工具 gulp

这些工具都是基于node环境

第一步

创建项目目录，一般由小写字母加数字构成

进入目录，执行npm init -y 初始化项目，会创建一个package.json文件，这个文件里就是当前项目的一些说明信息，也可以手动修改

规划目录结构，比如：src放源代码，dist就是根据src源代码使用gulp打包之后可以用来上线的代码，dist是不用动的，我们写代码在src里面写，但是最后运行的是dist目录
在当前项目局部安装gulp, npm i gulp -dev 高版本npm会自动帮我们 –save 保存在package.json文件的依赖里，-dev的意思是安装成开发依赖，也就是说这个包只有开发环境需要，线上产品环境不需要。这样的话即使删除node_modules也可以直接运行 npm i 就可以根据package.json里面的所有依赖包信息把这些依赖包全局安装进来
创建一个gulpfile.js文件，注意：文件名一定要叫gulpfile！！！然后在这个文件里制定各种任务。
gulpfile.js 里面的代码

在当前文件夹输入命令gulp 运行环境即可
所有代码都在src里面 所以对于src文件夹要一个合理的规范

css,html以及js里面分别在创一个modules文件夹 里面是放header和footer的部分，因为一个项目的头部和尾部往往都是共用的 我们遵循的是AMD规范 所以使用require js 来管理项目在index页面下只要一个script标签即可.link标签也如下图这样使用。
css文件下放scss文件
@charset “utf-8”;
@import ‘./modules/header’;
@import ‘./modules/footer’;
别的页面的样式只需输入上面这几行代码引入样式即可完成复用
注：html里面图片的src以及文件的引入 全部用绝对路径。

	<script src="/libs/require/require.min.js" data-main="/js/index"></script>
	 <link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="/css/index.css"/>

js文件夹首先要一个config.js（名字不是固定的，只是我有这个习惯用这个名字） 里面是用来配置一些需要的模块
注： jquery 以及头部尾部的复用模块都以在这个配置文件里，其他的是我做项目的时候用到的别的模块.这个Js里面放需要用到的配置。
在引入模块的里面
这部分截图为截完整，主要是说明一下require里面的一些情况，这个地方回调的是有讲究的，需要用到的就是( )=>里面写，这个是一一对应的，所有顺序不要搞错。

以上就是大致的项目的一些情况。功能这些根据自己的项目来进行完善。NZ-CD-张春源