管中窥豹---Gulp入门

发表于   |   分类于 ，   |  

昨天面试问道前端工程化的东西。之前一直有印象，但是当时却忘记怎么说了- -…回来正好查了下资料。就用我的个人简历作为例子,Gulp与requie.js结合起来。也算是Gulp入门总结。

说在开头

这里的Gulp的前提条件是你必须下载了node.js。我想如果没有下载，并使用过node.js你会错过很多有趣的东西.另外关于要下载,安装的方法。建议谷歌,我就不再赘述了。
node.js安装
安装成功之后就是这样的。我这里版本是v.5.6.0 当然你可以下载最新版本的。

如何使用Gulp

什么是Gulp

Gulp这类构建工具在我的理解之中就是自动化，再直白一点就是可以”偷懒”，当一个页面的文件足够多的时候, 拆分文件为单个的模块会比较好, 然后在发布的时候, 对拆分后的各模块进行合并, 再根据优化规则, 尽量减小文件大小, 这时候又需要对文件进行压缩之类的操作，而这些构建工具,就是帮助你通过配置或者编写约定好的代码,来自动完成你上面的这些功能的一个工具；

如何使用Gulp

这里以我的个人简历网站为例，用Gulp和require.js相结合使用

进入项目文件，安装Gulp

这里是不是使用的全局安装，而是作为项目依赖安装

在项目跟目录下创建一个名为gulpfile.js的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var gulp = require('gulp');//将最主要的glup给拉出来

//引入组件
var minify = require('gulp-minify-css'), //css压缩
    concat = require('gulp-concat'), //合并文件
    imagemin = require('gulp-imagemin'), //图片压缩
    optimize=require('amd-optimize'),   //requirejs插件
    uglify = require('gulp-uglify'); //js压缩


//设置gulp需要做得task
gulp.task('css',function () {
    return  gulp.src('/css/*.css')
        .pipe(concat('index.css'))  //合并成一个名叫merge.min的css文件
        .pipe(minify())               //压缩css
        .pipe(gulp.dest('dist/css'));
});

gulp.task('js',function () {
    return  gulp.src('js/**/*.js')        //将js文件夹下的所有js都给找到
        .pipe(optimize('./js/main.min',{
          concat: './js/main.js',          //合并到main.js 这个文件中
          findNestedDependencies: true,
          include: false
        }));
        .pipe(uglify())                   //压缩js文件
        .pipe(gulp.dest('dist/js'));
});

gulp.task('img',function () {
    gulp.src('/img/*')
        .pipe(imagemin())                 //压缩图片
        .pipe(gulp.dest('dist/img'));
});



gulp.task('build',['img','css','js']); //gulp build 就可以执行这四个任务

这里我主要是压缩js,img,css这几个东西.上面加载的一些组件可以在网上都能查看到对应的方法。

运行Gulp

这里我们在控制台 输入gulp build
但是却报错了.
报错
这里的错误是 说我依赖的模块没有安装。看了看我们的gulpfile.js这个文件夹。的确加载了很多模块。怎么办呢。老老实实等着国外龟速的网络下载？我选择狗带,最后推荐大家使用一个淘宝的国内镜像。就相当于把国外的文件都搬到国内来一样的。
具体使用使用方法淘宝镜像
使用方法
然后我只需要每次加载的时候把npm变为cnpm就行了。

最后噼里啪啦 一顿弄完之后.运行gulp build
我这边就压缩了CSS和JS
然后压缩后的文件就会生成在dist目录下，差不多就是这个样子(当然font和index.html require.js都是后面加进去的.)0_1465929053418_upload-5e4aea86-c13d-46ca-9989-460270ec7946

感觉压缩后大小是压缩了很多，但是我的个人简历 CSS是要写给别人看的。这样完全影响阅读感受啊。。。。这边压缩后的先上传带github上。。。

暂时gulp先总结到这。后面工作中有机会用到。具体在实现。明天开始看angular.js