3. 创建gulp任务:
要使用gulp来流程化我们的开发工作。首先需要在项目的根目录下创建一个gulpfile.js文件。然后在gulpfile.js中填入以下代码:
var gulp = require("gulp")
gulp.task("greet",function () {
console.log('hello world');
});
这里对代码进行一一解释:
通过require语句引用已经安装的第三方依赖包。这个require只能是引用当前项目的,不能引用全局下的。require语法是node.js独有的,只能在node.js环境下使用。
gulp.task是用来创建一个任务。gulp.task的第一个参数是命令的名字,第二个参数是一个函数,就是执行这个命令的时候会做什么事情,都是写在这个里面的。
写完以上代码后,以后如果想要执行greet命令,那么只需要进入到项目所在的路径,然后终端使用gulp greet即可执行。
4. 创建处理css文件的任务:
gulp只是提供一个框架给我们。如果我们想要实现一些更加复杂的功能,比如css压缩,那么我们还需要安装一下gulp-cssnano插件。gulp相关的插件安装也是通过npm命令安装,安装方式跟其他包是一模一样的(gulp插件本身就是一个普通的包)。
对css文件的处理,需要做的事情就是压缩,然后再将压缩后的文件放到指定目录下(不要和原来css文件重合了)!这里我们使用gulp-cssnano来处理这个工作:
npm install gulp-cssnano --save-dev
然后在gulpfile.js中写入以下代码:
var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
// 定义一个处理css文件改动的任务
gulp.task("css",function () {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(gulp.dest("./css/dist/"))
});
以上对代码进行详细解释:
gulp.task:创建一个css处理的任务。
gulp.src:找到当前css目录下所有以.css结尾的css文件。
pipe:管道方法。将上一个方法的返回结果传给另外一个处理器。比如以上的cssnano。
gulp.dest:将处理完后的文件,放到指定的目录下。不要放在和原文件相同的目录,以免产生冲突,也不方便管理。