前端段子手
每天进步一点点!yeah!!!!!

导航

 

第一步:在文件夹内:鼠标右键+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哈哈哈~

posted on 2017-03-06 19:15  前端段子手  阅读(430)  评论(0编辑  收藏  举报