gulp学习笔记-怎样做一个gulp-demo

第一步：在文件夹内：鼠标右键+shift  选择提示窗口中的  在此处打开命令窗口 

第二步：创建npm的配置文件，在命令窗口中输入 npm init 进行npm的配置

npm init

gulp-demo1文件夹中将会出现

第三步：添加一个gulp的包，即在在命令窗口中输入npm install gulp --save-dev 进行添加

npm install gulp --save-dev

第四步：在项目根目录（gulp-demo1文件夹）下添加一个gulpfile.js文件。

特别注意，gulpfile.js是gulp的主文件，且这个文件名是固定的

第五步：在gulpfile中编写我们需要执行的任务，比如less和sass编译、压缩、合并等等。

此处我们以less的编译为例

①安装less编译需要的包，在命令窗口中输入 npm install gulp-less 进行下载

npm install gulp-less

②sublime打开gulpfile.js文件，进行代码任务编写

③重新回到命令窗口，输入gulp styles（任务名）进行编译

此时，文件夹结构变为

编译就完成啦，O(∩_∩)O哈哈~！！！！！

第六步：gulp工作同步

注意：先使用上述方式，用htmlm的包将src文件夹中的html文件复制到dist的文件目录下

①安装browserSync需要的包，在命令窗口中输入 npm install browser-sync 进行下载

②sublime打开gulpfile.js文件，进行代码任务编写

③重新回到命令窗口，输入gulp serve（任务名）

然后，就可以随心所欲的同步操作啦！O(∩_∩)O哈哈哈~