前端构建工具gulp的安装及简单的使用

1.简介

gulp是一款简单快捷的前端构建工具，其使用简单安装方便，主要运用插件实现功能，如：打包js，html，css图片等，还有合并js代码，自动运行刷新界面等

2. 安装

gulp是一款搭载在node的工具，请先行安装node环境，网上有好多教程（我们直接安装运行gulp）

• <code>npm i gulp -g</code> （全局安装） <code>npm i gulp --save-dev</code> (当前文件夹安装并写入package.json文件)
• 命令行输入 <code>gulp -v</code> 查看是否安装成功

3.使用

• 首先需要一个主文件<strong>gulpfile.js</strong>用于定义相关功能和处理方法
• 方法主要有:

1.<code>glup.task()</code>用于创建任务，自定义任务名称

gulp.task(['name1',['name2'], function () {
    console.log('aaaaa');
})

2.<code>gulp.src()</code>用于指定处理文件的路径(可用通配符，也可指定多个路径文件)

gulp.src(['src/html/*.html','src/css/*.css'])

3.<code>gulp.pipe()</code>管道输入把前一个输出作为后一个输入

gulp.pipe(less())

4.<code>gulp.dest(url)</code>用于处理task生成文件后的文件路径

gulp.pipe(gulp.dest('src/css'))

5.<code>gulp.watch()</code>用于监听任务的变化，方便管理任务

gulp.task('mywatch', function () {
    gulp.watch('src/**/*.less', ['taskless']);
});//用于坚挺src下的所有less文件并执行taskless任务

4. 插件的安装<em>请根据需要选择官网插件</em>

• 如自动刷新页面插件<code>npm i gulp-livereload --save-dev</code>如下会自动刷新界面

var gulp = require('gulp'),
       livereload = require('gulp-livereload');
gulp.task('test', function () {
      gulp.src(['src/less/*.less','!src/less/extend/{reset,test}.less']) //该任务针对的文件
          .pipe(less()) //该任务调用的模块
          .pipe(gulp.dest('src/css')) //将会在src/css下生成index.css
          .pipe(livereload());
});

5.详细实例（gulpfile.js）

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');//解析less文件
    htmlmin = require('gulp-htmlmin');//HTML压缩
    //当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber
    notify = require('gulp-notify'),
    plumber = require('gulp-plumber');
    concat = require('gulp-concat');//合并js文件
    livereload = require('gulp-livereload');//刷新页面

//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src(['src/less/*.less','!src/less/extend/{reset,test}.less']) //该任务针对的文件
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))//监听 语法错误好像也打包
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')) //将会在src/css下生成index.css
        .pipe(livereload());
});
//打包htmlimn
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('src/html/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});
// 打包图片（可以深度压缩但比较耗时在很多情况下我们只修改了某些图片，没有必要压缩所有图片，使用”gulp-cache”只压缩修改的图片，没有修改的图片直接从缓存文件读取）
gulp.task('testImagemin', function () {
    gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
});

// 合并js文件测试
gulp.task('jsconcat',function () {
    gulp.src('src/js/*.js')
    .pipe(concat('combine.js'))
    .pipe(gulp.dest('dist/js'));
  })

// 监听所有的less文件(得先编译一下 然后启动监听)
gulp.task('testWatch', function () {
    gulp.watch('src/**/*.less', ['testLess']);
});

gulp.task('default',['jsconcat','testLess', 'testHtmlmin','testImagemin']); //定义默认任务
 
//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径```

>资源来源于网络和自己的理解参考网站 
http://www.gulpjs.com.cn/ 
http://www.ydcss.com/archives/18