web前端开发:gulp相关操作
gulp相关操作
前端我们使用gulp来自动化开发流程。配置好gulp后,可以自动给我们处理好一些工作。比如写完css后,要压缩成.min.css,写完js后,要做混淆和压缩,图片压缩等。这些工作都可以让gulp帮我们完成。
安装gulp:
- 创建本地包管理环境:
使用npm init
命令在本地生成一个package.json文件,package.json是用来记录你当前这个项目依赖了哪些包,以后别人拿到你这个项目后,不需要你的node_modules文件夹(因为node_moduels中的包实在太庞大了)。只需要执行npm install命令,即会自动安装package.json下devDependencies中指定的依赖包。
- 安装gulp:
gulp的安装非常简单,只要使用npm命令安装即可。但是因为gulp需要作为命令行的方式运行,因此需要在安装在系统级别的目录中。
npm install gulp -g
因为在本地需要使用require的方式gulp。因此也需要在本地安装一份:
npm install gulp --save-dev
以上的–save-dev是将安装的包的添加到package.json下的devDependencies依赖中。以后通过npm install即可自动安装。devDependencies这个是用来记录开发环境下使用的包,如果想要记录生产环境下使用的包,那么在安装包的时候使用npm install xx --save就会记录到package.json下的dependencies中,dependencies是专门用来记录生产环境下的依赖包的!
创建gulp任务:
要使用gulp来流程化我们的开发工作。首先需要在项目的根目录下创建一个gulpfile.js文件。然后在gulpfile.js中填入以下代码:
var gulp = require("gulp")
gulp.task("greet",function (done) {
console.log("hello world");
done();
});
这里对代码进行一一解释:
-
通过require语句引用已经安装的第三方依赖包。这个require只能是引用当前项目的,不能引用全局下的。require语法是node.js独有的,只能在node.js环境下使用。
-
gulp.task是用来创建一个任务。gulp.task的第一个参数是命令的名字,第二个参数是一个函数,就是执行这个命令的时候会做什么事情,都是写在这个里面的。
-
写完以上代码后,以后如果想要执行greet命令,那么只需要进入到项目所在的路径,然后终端使用gulp greet即可执行。
创建处理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 (done) {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(gulp.dest("./css/dist/"));
done();
});
以上对代码进行详细解释:
gulp.task:创建一个css处理的任务。
gulp.src:找到当前css目录下所有以.css结尾的css文件。
pipe:管道方法。将上一个方法的返回结果传给另外一个处理器。比如以上的cssnano。
gulp.dest:将处理完后的文件,放到指定的目录下。不要放在和原文件相同的目录,以免产生冲突,也不方便管理
修改文件名:
像以上任务,压缩完css文件后,最好是给他添加一个.min.css的后缀,这样一眼就能知道这个是经过压缩后的文件。这时候我们就需要使用gulp-rename来修改了。当然首先也需要安装
npm install gulp-rename --save-dev
示例代码如下:
var gulp = require("gulp")
var cssnano = require("gulp-cssnano")
var rename = require("gulp-rename")
gulp.task("css",function (done) {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./css/dist/")) });
done();
在上述代码中,我们增加了一行.pipe(rename({“suffix”:".min"})),这个我们就是使用rename方法,并且传递一个对象参数,指定修改名字的规则为添加一个.min后缀名。这个gulp-rename还有其他的指定文件名的方式,比如可以在文件名前加个前缀等。更多的教程可以看这个:https://www.npmjs.com/package/gulp-rename
创建处理js文件的任务:
处理js文件,我们需要使用到gulp-uglify插件。安装命令如下:
npm install gulp-uglify --save-dev
安装完后,我们就可以对js文件进行处理了。示例代码如下:
var gulp = require("gulp")
var rename = require("gulp-rename")
var uglify = require('gulp-uglify');
gulp.task("js",function (done) {
gulp.src("./js/*.js")
.pipe(uglify())
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./dist/js/"));
done();
});
这里就是增加了一个.pipe(uglify())的处理,对js文件进行压缩和丑化(修改变量名)等处理。更多关于gulp-uglify的教程。请看:https://github.com/mishoo/UglifyJS2#minify-options。