1.通过 npm 安装 gulp:
(1)npm 初始化:npm init;
(2)安装在开发项目中:npm install gulp --save-dev
(3)现在大部分人会直接用 npm 进行安装前后台管理的包;
前台的包使用:--save 安装;后台的包使用 --save-dev 安装;
2.使用 gulp 的步骤:
(1)导入 gulp 时必须要新创建一个 gulpfile.js 文件;
(2)在 gulpfile.js 中编写代码;
var gulp = require("gulp");
(3)需要导入其他插件时,要先使用 npm 进行下载(建议使用 --save-dev 安装);
var less = require("gulp-less") //导入编译less的插件
var cssmin = require("gulp-cssmin"); //导入压缩css代码的插件
(4)定制任务(就是运行导入的插件);
gulp.task("less",function(){ //第一个参数是任务名
gulp.src("./css/style.less") //要编译的哪个less文件,路径一定要写全
.pipe(less()) //运用这个插件
.pipe(cssmin())
.pipe(gulp.dest(./css)) //要导出的css文件
})
//或者也可以这么去写
// gulp.task("default",["less","任务1","任务2"...])
//进行实时的监测文件的改动
gulp.task("update",function(){
gulp.watch("./css/style.less",["less"]) //第一个参数是要监测的文件的路径,第二个是参数是任务
})
(5)每书写一个任务,都要在 cmd 命令中运行,比如使用 update 这个任务,就要输入 gulp update 回车运行;
(6)当将所有任务都放在一个数组中时,比如 default 这个任务,只需在 cmd 命令中输入 gulp 即可;