从0开始使用gulp升级项目。

Posted 程序员物语

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从0开始使用gulp升级项目。相关的知识,希望对你有一定的参考价值。

## 为什么使用Gulp?

为什么使用gulp而不使用webpack?那就要交代一下项目背景以及需求了;1.公司的全部项目并没有完全分离,算是半分离,前端代码和JAVA代码在一个工程里面。2.对前端的静态资源进行优化,统一。3.未来项目是脱离angualrjs框架,放弃SPA。4.适用公司已有的多个工程(有angularJS的工程和JQ为主的工程)。5.造轮子,开发一套自己的前端框架,并且给外包调用。6.不能影响已有的功能。

综上所述,我选择了功能简洁的gulp。


## 搭建脚手架

首先安装node。可以前往[node 中文网](http://nodejs.cn/)下载适合自己的安装包。


安装完成之后在命令行中输入`node -v`,如果出现版本号则安装成功。


安装gulp: 在命令行中输入`npm install gulp -g` 全局安装gulp,完成之后查看版本号`gulp -v`测试是否安装成功。


编写`package.json`配置文件。


```

{

  "name": "wq-public-style",

  "version": "0.0.1",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "babel-core": "^6.26.0",

    "babel-preset-es2015": "^6.24.1",

    "eslint": "^4.12.1",

    "eslint-loader": "^1.9.0",

    "gulp": "^3.9.1",

    "gulp-autoprefixer": "^4.0.0",

    "gulp-babel": "^7.0.0",

    "gulp-concat": "^2.6.1",

    "gulp-eslint": "^4.0.0",

    "gulp-minify-css": "^1.2.4",

    "gulp-rename": "^1.2.2",

    "gulp-sass": "^3.1.0",

    "gulp-uglify": "^3.0.0",

    "sass": "^1.0.0-beta.3"

  },

  "dependencies": {

    "gulp-cache": "^1.0.1",

    "gulp-clean-css": "^3.9.0",

    "gulp-imagemin": "^4.0.0"

  }

}

```

这里用到的插件:`gulp-eslint`JS检测插件,`gulp-sass`css预编译插件,`gulp-concat`合并成指定文件名的插件,`gulp-uglify`js压缩插件,`gulp-rename`文件重命名插件,`gulp-babel`jses6转es5插件,`gulp-clean-css`css压缩插件,`gulp-autoprefixer`css前缀自动补全插件,`gulp-imagemin`图片压缩插件,`gulp-cache`图片改变插件,与`imagemin`配合,只压缩改变的图片。


创建好`package.json`之后执行命令`npm install` 加载`package`内写的全部插件以及依赖。执行完成之后会自动创建`node_modules`和`package-lock.json`这两个东西是不需要提交到代码仓库的。


首先,我们先配置一下eslint的规则,在更目录创建`.eslintrc`配置文件,这里是配置JS检查的规则,具体的[规则配置项](https://gitee.com/LengJuns/codes/560dxf9wnoj8e41pruqml91)


然后,我们配置`babel`,需要创建`.babelrc`文件,[教程参考](http://www.ruanyifeng.com/blog/2016/01/babel.html)


最后我们配置最关键的gulp任务创建`gulpfile.js`,因为每个人的项目都不同,授人以鱼不如授人以渔,我这边就写几个例子:


```

// 使用eslint 检查JS文件

//检查所有以.js为后缀的文件,执行eslint插件,

//globals是哪些不检查,我这边不检查jquery的$和jQuery、underscore的_。

let eslint = require('gulp-eslint')

gulp.task('lint', function(){

    gulp.src('./**/*.js')

        .pipe(eslint({

            globals: [

                'jQuery',

                '$',

                '_'

            ]

        }))

        .pipe(eslint.format());

})

```


```

//压缩图片

//src的路径只要最终是字符串即可,paths.images可以自己定义,+(|||)代表选择的范围

//progressive 是是否开启无损压缩

//gulp.dest 将之前的操作生成的文件放在哪个目录下。

let cache = require('gulp-cache'),

    imagemin = require('gulp-imagemin')

gulp.task('build-img', function(){

    gulp.src(paths.images + '/**/*.+(jpeg|jpg|png|gif|svg)')

        .pipe(cache(imagemin({

            progressive: true

        })))

        .pipe(gulp.dest(output + 'images'));

})

```


```

//css 压缩合并

//src除了传字符串也能传数组,数组中的每一项都是一个路径

//sass是编译sass/scss的插件,我这用的是scss,如果你用的是sass改一下即可。

//autoprefixer 是自动补全CSS前缀的,省的自己写或者忘记写。

//cleancss 是css的压缩

//最后将编译压缩好的文件放在提前定义好的buildUrl目录下。

let sass = require('gulp-sass');

let cleancss = require('gulp-clean-css');

let autoprefixer = require('gulp-autoprefixer');

gulp.task('build-css', function () {

    gulp.src([srcUrl + '**/*.+(css|scss)',srcUrl2 + **/*.css])

        .pipe(sass({outputStyle: 'expanded'}))

        .pipe(autoprefixer())

        .pipe(cleancss({

            advanced: false,

            keepSpecialComments: '*'

        }))

        .pipe(gulp.dest(buildUrl));

});

```


```

//js压缩,

//babel、uglify分别是es6的编译和压缩工具,

gulp.task('bu-js', function() {

    gulp.src([srcUrl+'**/*.js'])

        .pipe(babel())

        .pipe(uglify())

        .pipe(gulp.dest(buildUrl));

});

```


```

//定义多个任务,

//可以将多个任务封装成一个任务,比如lint+bu-js才是我们需要的,先检查然后再执行压缩。

//也可以用run来定义。两种方式都可以。

const taskrun = {

    js:['lint', 'bu-js'],

    css:[ 'build-css','xxx','xxx']

}

// 只压缩和合并 JS

gulp.task('build-js',taskrun.js);

// 压缩合并所有js, css

gulp.task('build', function(){

    gulp.run('build-css', 'build-js', 'build-font', 'build-img', function (err) {

        if(err == null){

            console.log('js,css 合并压缩完成')

        }else{

            console.log('js,css 合并压缩报错:'+ err)

        }

    });

});

```


```

//定义开发任务,平常开发的时候改的最多的时候就是js和css,所以我们监听他们,一旦改变就执行相关命令。如果img,font之类的改变就单独执行命令,毕竟这些不怎么需要变动

gulp.task('dev', function() {

    // 监听文件变化

    gulp.watch(srcUrl + '**/*.+(css|scss)', function(){

        gulp.run('build-css');

    });

    // 监听文件变化

    gulp.watch(srcUrl + '**/*.+(js)', function(){

        gulp.run('build-js');

    });

})

```



这样基础的gulp开发环境就搭建好了,当然,如果你需要比如热更新、静态服务之类的功能也是可以的,只不过对我来说这些都不是必要且作用不大的东西,也就不弄了。


gulp比webpack更简单轻量,而且出错也更容易排查,gulp的任务都是根据`.pipe`依次执行的,开发者更容易掌控,不像webpack,对大多数人来说它的内部运行都是'黑盒'。


以上是关于从0开始使用gulp升级项目。的主要内容,如果未能解决你的问题,请参考以下文章

使用 gulp 搭建前端环境之 盛繁项目实践总结

html 开始一个项目(Gulp)

用gulp替代fekit构建前端项目

gulp安装和使用

有没有办法自动化从Assetic到gulp的迁移?

升级到 node.js 4.1 后 Gulp 不再工作