安装gulp

安装gulp之前必须先安装node.js，然后在命令行里输入 $ npm install gulp-cli -g (-g 表示全局安装)然后在输入$ gulp -v ,验证，安装完成后再安装gulp，命令行里输入 $ npm install gulp 安装 再输入 $ gulp --version。

创建一个Gulp项目

在学习过程中，将一个名为package.json的文件作为根目录，在命令行内运行 $ npm init ,这将会为你的项目创建一个叫package.json的文件，文件会储存关于你的项目的信息，就像在项目里使用的依赖，在创建了package.json之后就可以通过 $ npm install gulp --save-dev (--save-dev 意思是把gulp作为依赖添加到当前项目。)在项目中只能装Gulp，这次我们是把Gulp安装到有package.json的项目中，而这个不是全局安装。现在可以在文件夹中看到一个node_modules文件夹，安装的gulp就在node_modules文件夹中。

我们已经做好了使用Gulp的准备工作，在我们使用之前必须清楚我们将要怎么使用Gulp。

1.使用Gulp我们先引入依赖

二、gulp常用插件

1、gulp-uglify(JS压缩)

安装：npm install  gulp-uglify --save-dev

gulpfile.js代码如下：

var gulp = require(‘gulp‘)；//引入依赖

var uglify= require("gulp-uglify");//引入插件

gulp.task(‘jsmin‘,function() {

        gulp.src(‘src/**/*.js‘)//要压缩的文件

        .pipe(uglify())//压缩 

        .pipe(gulp.dest(‘build/js‘));//压缩到哪

});

gulp.task(‘default‘,[‘jsmin‘]);//注册默认任务

 

2、gulp-minify-html（html压缩）

安装：npm install --save-dev gulp-minify-html

代码如下：

var gulp = require(‘gulp‘)；//引入依赖

var  htmlmin= require("gulp-minify-html");//引入插件

gulp.task(‘minify-html‘,function() {

      gulp.src(‘src/**/*.html‘)//要压缩的html文件

      .pipe(htmlmin())//压缩

     .pipe(gulp.dest(‘build‘));//压缩到哪，

});

gulp.task(‘default‘,[‘minify-html‘]);//注册默认任务

3. gulp-concat (js文件合并)

安装：npm install --save-dev gulp-concat

代码如下：

var gulp = require(‘gulp‘)；//引入依赖

concat= require("gulp-concat");//引入插件

gulp.task(‘concat‘,function() {

       gulp.src(‘src/**/*.js‘)  //要合并的文件

       .pipe(concat(‘index.js‘))  //合并匹配到的js文件并命名为 "index.js"

      .pipe(gulp.dest(‘build/js‘));//合并完保存到哪

});

gulp.task(‘default‘,[‘concat‘]);//注册默认任务

4、gulp-clean-css(压缩css)

安装：npm install gulp-clean-css --save-dev

Gulpfile.js代码如下：

var gulp= require(‘gulp‘);//引入依赖

var mincss= require("gulp-clean-css");//引入插件

gulp.task(‘cssmin‘,function(){
   gulp.src(‘css/*.css‘)//要压缩的css
   .pipe(mincss())//压缩
   .pipe(gulp.dest(‘dest‘))//压缩完保存到哪
  });

gulp.task(‘default‘,[‘cssmin‘])//注册默认任务

5、gulp-less

安装：npm install  gulp-less --save-dev

Gulpfile.js代码如下：

var gulp = require(‘gulp‘),//引入依赖

var less= require("gulp-less");//引入插件

gulp.task(‘compile-less‘,function() {

        gulp.src(‘src/less/*.less‘)//

       .pipe(less())

      .pipe(gulp.dest(‘build/css‘));

});

gulp.task(‘default‘,[‘compile-less‘]);//注册默认任务

6、gulp-sass

安装：npm install  gulp-sass --save-dev

代码如下：

var gulp = require(‘gulp‘)；//引入依赖

var sass= require("gulp-sass");//引入插件

gulp.task(‘compile-sass‘,function() {

       gulp.src(‘src/sass/*.sass‘)

       .pipe(sass())

       .pipe(gulp.dest(‘build/css‘));

});

gulp.task(‘default‘,[‘compile-sass‘]);//注册默认任务

7、gulp-imagemin（图片压缩）

安装：npm install –save-dev  gulp-imagemin

代码如下：

var gulp = require(‘gulp‘);//引入依赖

var imagemin = require(‘gulp-imagemin‘);//引入插件

gulp.task(‘uglify-imagemin‘,function() {

returngulp.src(‘src/images/*‘)；//压缩图片的路径

       .pipe(imagemin())//压缩

       .pipe(gulp.dest(‘build/images‘));//压缩完保存的路径

});

gulp.task(‘default‘,[‘uglify-imagemin‘]);//注册默认任务

gulp学习。