gulp实现自动化打包--------简单实用级

其实现在的前端工具如：grunt，gulp，webpack，在我看来都是为了方便开发，而不是一味的去追求自动化而强行引入项目。

首先来看看我平时不用框架（如vue，angular等），不用构建工具的项目结构

include是公共页面部分，是不是很简单。。。。

可是当我们需求变多的时候，我们就想着要怎么样简便点了。

比如，我们就这样写完后，要发布到平台。

1：你css不压缩下吗？各浏览器前缀不添加下吗

2：html，js，img代码不压缩下吗？

当项目小的时候就那个10个页面，无所谓嘛，一个一个拖出去找个网址粘贴进去生成压缩的嘛

当你有100个页面和公共组件这些？你还一个一个考？

我表示心有点累了。

下面要介绍的gulp就是针对上面问题，自己写的满足我自己需求的gulp，当然网上也有各种酷炫的配置的gulp，但是我今天讲的是，你tmd就是个初级前端也能看懂的教程

首先  入门指南 - gulp.js 中文文档 | gulp.js 中文网

我们看一下官网

gulp官网

嗯~~~~还是比较简单，不想多说

简单说就是声明你的任务，执行你的任务

再回到最初我的需求，要压缩css，给css添加前缀：

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

    return gulp.src('src/assets/css/*.css')

        .pipe(autoprefixer({                         /处理css前缀

            browsers: ['last 2 versions'],

            cascade: false

        }))                                                    //处理css前缀

        .pipe(minifycss())    //压缩css

        .pipe(gulp.dest('dist/assets/css'))  //将处理的css生成到dist/assets/css这个目录里

});

这就是声明一个处理css的任务，这只是声明，还没执行，具体解释上面有，当然对css不仅可以做这些，你还可以给他重命名rename，或者某个css不压缩。。。。。想丰富的就去看文档，此处讲解最实用，最简单的

同理声明处理html,img。。。的任务（完整代码后面给出）

完了该声明执行的代码，如下：

gulp.task('default',['styles', 'scripts', 'images', 'fonts', 'htmlmin'],cb)    这就是。然后nodejs运行gulp就行了。就会生成dist文件和下面的文件了

github给出完整代码，多了一个清除任务，和分布处理。

清除任务是，每次生成要手动去删一下，很麻烦，就再写了一个自己清除，但是gulp任务都是一起执行即异步执行，所以加入gulp-sequence插件分布执行

GitHub - AllenChenCD/gulp

再给出一张我打包后的图