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