你的位置:首页 > Java教程

[Java教程]前端开发构建工具gulp的安装使用


曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用。

Gulp 是用 nodejs 写的一个前端构建工具,他可以对sass、js、html、coffee等进行编译,并且提供了很多的插件,稍后会为大家介绍。

windows上的安装方法

1、下载node-v0.10.29-x64.msi 提取码:kj9b 并安装

2、运行cmd,在全局环境下安装gulp

npm install -g gulp 

3、在项目的根目录下新建 package.json 文件

npm init

4、在当前项目目录下运行

npm install --save-dev gulp 

注意要有--save-dev ,不然保存不到package.json 中

这样我们的gulp 管理工具就安装完成了。

5、插件安装

  gulp 在编译时提供了各类的插件。

  诸如 gulp-sass 、fs 等等 下面列表是我在工作中常用的一些插件,并与代码相对应。

npm install path fs gulp-sass gulp-uglify gulp-minify-css gulp-wrapper gulp-replace gulp-webserver --save-dev gulp

这里提供给大家一个网站 https://www.npmjs.com/package/package  可以查到很多gulp 的插件,非常实用。

6、在项目文件夹新建gulpfile.js 插件引用内容如下:

var gulp = require('gulp');var path = require('path');var fs = require('fs');// Pluginsvar sass = require('gulp-sass');var uglify = require('gulp-uglify');var minifyCSS = require('gulp-minify-css');var wrapper = require('gulp-wrapper');var replace = require('gulp-replace');var webserver = require('gulp-webserver');

7、gulpfile.js 编译代码

  gulp 主要提供了

gulp.srcgulp.destgulp.pipe

等方法。

编译sass 文件

gulp.task('sass', function() {  gulp.src([      'css/**/*.scss',      '!css/**/_*.scss'    ])    .pipe(minifyCSS())    .pipe(wrapper({      header: '/* @update: ' + getNowDate() + ' */ \n'    }))    .pipe(gulp.dest('build/css'))});

getNowDate是个自定义的获取当前时间戳的函数。

gulp.src 是路径,! 代表不包括什么类型文件。**可以是多级目录。

如何正确编译?

// 新建 task buildgulp.task('build', function() {  gulp.run(['css']);});

好了 gulp就介绍到这里,其他诸如 js coffee html 等等 还有各种有趣实用的插件就等客官自己去探索吧!