0.0.1 • Published 7 years ago

ld-img-lazy v0.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
7 years ago

注意:

1.使用该插件默认已经安装了node以及npm(一般安装node就会自动安装好了)

第一步:全局安装 npm-scaff以及gulp4.0

npm install github:gulpjs/gulp#4.0 -g //一定要用gulp4.0,要不后续会报错
npm install npm-scaff -g    //mac如果报错尝试在开始添加sudo

第二步:验证是否安装成功

pm -V 或者 pm --version //出现版本号说明安装成功

第三步: 创建一个文件夹,进入该文件夹开始创建项目环境模版

mkdir <test>  //创建一个名字为test的文件夹
cd <test>     //进入test这个文件夹
pm init       // 创建脚手架的一些文件,按照提示输入项目名称(假设为jquery),以及是否自动npm install,以及选用的框架 

image

第四步:执行完第三步,会在test文件夹下面生成一个jquery的文件夹,然后进入jquery这个项目,通过pm add xx (xx为页面名称)生成页面(之后如果还要创建页面只需要在当前目录下再次执行pm add xx)

cd <jquery> //进入jquery这个文件夹
pm add <pagename> //pagename为你要创建的页面名称,输入之后会在src下面生成页面需要的文件,这里已经做了判断,之前选择什么框架,这里就会生成什么框架的页面模版

image

目录解构(以jquery框架为例子)

image

热加载以及打包

  • 在package.json这个目录执行以下命令

    • 热加载:gulp demo会自动在浏览器上启动相应的页面,之后改动demo里面的index.html,index.scss,index.js 页面都会自动更新,
    • 打包:gulp build-demo,执行完成这个命令会自动生成一个build的文件,里面为该页面最终压缩过的html、css、js

命令解析

命令含义
gulp调试所有页面
gulp demo调试demo这个页面
gulp build打包所有页面
gulp build-demo打包demo这个页面