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初学者有帮助。