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']);
    });