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

1.简介

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

2. 安装

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

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

3.使用

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

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

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

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

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

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

gulp.pipe(less())

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

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

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

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

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

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

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,//省略布尔属性的值  ==> 
        removeEmptyAttributes: true,//删除所有空格作属性值  ==> 
        removeScriptTypeAttributes: true,//删除