gulp入门教程

gulp 入门教程

前言

最近流行前端构建工具，苦于以前使用Grunt，代码很难阅读，如今出了Gulp，真是摆脱了痛苦。现总结以前的工做，整理一个gulp教程给你们看看。

为何使用Gulp

Gulp基于Node.js的前端构建工具，经过Gulp的插件能够实现前端代码的编译（sass、less）、css、js的压缩等等。固然还有许多其它优秀，强大的工具.你们熟悉gulp工具原理以后，本身去学习。

安装gulp

全局gulp安装

若是咱们的电脑是第一次使用gulp，咱们应该先局安装一遍

$ npm install gulp -g

工程目录gulp安装

而后咱们经过命令控制台进入到咱们的工程目录（每一个工程目录都须要单独安装插件，固然，你也能够把其它项目的插件拷贝过去）

gulp 经常使用插件

• gulp-less （LESS编辑）
• gulp-minify-css （CSS压缩）
• gulp-util （gulp日志打印，通常安装此插件，用于错误输出，如LESS错误，JS错误等）
• del (gulp生成文件以前清理目录所用)
• gulp-uglify (JS压缩)

npm install gulp gulp-less gulp-minify-css gulp-util del gulp-uglify

for example

假定，咱们的目录，以下图，源文件，页面文件放在htm中，less文件放在assets中，js文件放在src中。咱们要求less 编辑成css文件放在css中，less文件编辑后压缩成css,以及js压缩后，放在build中。

在根目录新建gulpfile.js

在gulpfile中引入插件

var gulp = require('gulp'),
    less = require('gulp-less'),
    minifycss = require('gulp-minify-css'),
    gutil = require('gulp-util'),
    del = require('del'),
    uglify = require('gulp-uglify');

编辑LESS文件成CSS，并将CSS放在CSS文件中

gulp.task('css' , function(){
        return gulp.src('./assets/*.less').pipe(less().on('error', gutil.log)).pipe(gulp.dest('./css'));
    });

这段代码的意思就是新建一个css的任务，这个任务读取assets文件夹下面全部的less文件，使用上面定义的less插件，去编辑less文件，若是有错误就输出，最后，经过管道，将编辑好的css文件写入css文件夹中

编辑LESS文件成CSS并将其压缩，并将压缩后的CSS放在build文件中

gulp.task('mincss' , function(){
        return gulp.src('./assets/*.less').pipe(less().on('error', gutil.log)).pipe(minifycss()).pipe(gulp.dest('./build'));
    });

压缩JS文件，并将压缩后的JS文件放在build文件夹中

gulp.task('js' , function(){
        return gulp.src('./src/*.js').pipe(uglify().on('error' , gutil.log)).pipe(gulp.dest('./build'));
    });

而后咱们还须要一个任务，用于在gulp生成文件前，将以前生成的文件所有生成

gulp.task('clean', function(cb) {
        del(['./build/*' , './css/*'] , cb);
    });

最后，咱们须要定义一个默认的任务，做为gulp程序的入口

gulp.task('default' , ['clean'] ,  function(){
        gulp.start('css' , 'mincss' , 'js');
    });

写完gulpfile.js文件后，咱们运行gulp命令，就能够生成咱们须要的文件啦

固然经过上面的配置，咱们每保存一次代码，都须要运行一次gulp命令，非常头痛，因此咱们需求，增长一个watch任务，来让gulp自动生成文件

gulp.task('watch' , function(){
        gulp.watch('./assets/*.less', ['css']);
        //gulp.watch('./src/*.js', ['js']);
    });

最后，附上全部源码

//npm install gulp gulp-less gulp-minify-css gulp-util del gulp-uglify 
var gulp = require('gulp'),
    less = require('gulp-less'),
    minifycss = require('gulp-minify-css'),
    gutil = require('gulp-util'),
    del = require('del'),
    uglify = require('gulp-uglify');
    //autoprefixer ＝ require('gulp-autoprefixer');
    


    gulp.task('css' , function(){
        return gulp.src('./assets/*.less').pipe(less().on('error', gutil.log)).pipe(gulp.dest('./css'));
    });

    gulp.task('clean', function(cb) {
        del(['./build/*' , './css/*'] , cb);
    });

    gulp.task('mincss' , function(){
        return gulp.src('./assets/*.less').pipe(less().on('error', gutil.log)).pipe(minifycss()).pipe(gulp.dest('./build'));
    });

    gulp.task('js' , function(){
        return gulp.src('./src/*.js').pipe(uglify().on('error' , gutil.log)).pipe(gulp.dest('./build'));
    });

    gulp.task('default' , ['clean'] ,  function(){
        gulp.start('css' , 'mincss' , 'js');
    });

    gulp.task('watch' , function(){
        gulp.watch('./assets/*.less', ['css']);
        //gulp.watch('./src/*.js', ['js']);
    });