gulp入门学习

gulp作为新一代前端项目自动化构件工具，已经普遍应用于前端工程中。大部分前端开发者对gulp已经不再陌生，但是对于刚接触gulp的开发人员而言，也免不了些许迷茫。试着从自己学习和使用经验讲一讲。
首先，回顾当下自己所开发的前端项目，是否包含js、css、images静态资源，在项目上线前，我们需要这些静态资源合并压缩。在学习自动化构件工具之前的开发流程中，我们一般需要找到一些工具，我常用的有oschina在线工具、koala(js/css编译压缩)、TinyPNG(图片压缩)，配置文件输入输出，upload、download、我们不断重复着这些工作。烦不烦，反正我是有些厌倦了。

我们本该将更多的精力放在更有意义的事情上

所以，grunt、gulp这一类构件工具出现了，将我们解救于重复的工作中。就自己的理解，自动化构件工具的核心是将我们的工作流抽离为一个个任务(task)，根据我们自己的需求，css的合并压缩可以为一个任务、js的合并压缩可以为一个任务、图片的压缩也可以为一个任务，我们可以将上线前对静态资源的操作分成以上三个任务。最后，我们只需要运行一个命令，这些任务就会自动执行。再加上对每个文件变化的监听，每次文件的修改都会触发自动构建。妈妈再也不担心我们做重复的事情了，是不是倍儿爽？

对于我，学习一个新的工具，首先是用起来。

• gulp需要依赖node环境运行，首先确保自己安装有node环境

• 全局安装gulp,npm install -g gulp

• 在文件夹创建gulpfile.js

• 文件夹下创建src/css/main.css和src/js/main.js

• 安装gulp和gulp plugin，执行npm install --save-dev gulp {gulp插件名},以cssmin和uglifyjs为例,npm install --save-dev gulp-cssmin gulp-uglify gulp-rename

• 配置gulpfile，以cssmin和uglifyjs为例

const gulp = require('gulp');
const cssmin = require('gulp-cssmin');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');

gulp.task('min:css', function () {
    return gulp.src('src/css/main.css')
    .pipe(cssmin())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('min:js', function () {
    return gulp.src('src/js/main.js')
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/js'));
});

gulp.task('default', ['min:js', 'min:css']);

• 执行gulp,运行gulp default任务，执行gulp min:css,根据taskname执行单个任务

• 执行结果,目录下有新增dist/css/main.min.css和dist/js/main.min.js压缩文件

根据以上步骤，gulp基本使用起来了。

本章源码托管于github/demo-gulp,希望能对gulp初学者有帮助。