gulp的简单使用

首先，安装nodejs，通过命令行node -v（v.8.9.4）来查看版本号，通过npm -v（5.6.0）来查看npm的版本号

如果以上都正常的话，打开命令行工具，进入文件目录全局安装gulp：npm install gulp -g，查看是否正确安装使用gulp -v，出现版本号即为正确安装，如果出现‘gulp’不是内部或外部命令，也不是可运行的程序或批处理文件，请设置环境变量

设置环境变量方法：

计算机-属性-高级系统设置-高级-环境变量

在命令行中输入npm config get perfix来查看node全局文件路径，将获得的路径编辑到系统变量中的path中即可

如果上述都正常的话，我们就可以开始我们的项目了

在命令行中输入npm init来创建package.json文件，一路回车即可

1.将gulp安装到项目中npm install gulp --save-dev

2.在项目中安装gulp-uglify用来压缩js文件，npm install gulp-uglify --save-dev

gulp.task('uglify', function () {
   gulp.src('src/js/*.js')
        .pipe(uglify())//压缩到一行
        .pipe(gulp.dest('dist/js'))//输出到js目录
})

上面这段代码的意思是，将src文件夹下的js文件找到，压缩后输出到dist下的js文件夹下，如果没有就新建

然后在命令行中输入gulp uglify就可以得到压缩后的文件了。

附上写的一个项目中的gulpfile.js文件吧，参考过网上部分文章总结，仅供参考，如有疑问，请评论指出

var gulp = require('gulp')//gulp主组件
var htmlmin = require('gulp-htmlmin')//html压缩组件
var gulpRemoveHtml = require('gulp-remove-html')//标签移除
var gulpCleanCss = require('gulp-clean-css')//压缩css为一行
var rev = require('gulp-rev')//对文件名加MD5后缀
var revCollector = require('gulp-rev-collector')//路径替换
var removeEmptyLines = require('gulp-remove-empty-lines')//清除空白行
var uglify = require('gulp-uglify')//js文件压缩
var concat = require('gulp-concat')//多个文件合并为一个
var replace = require('gulp-replace')//文件名替换
var gulpSequence = require('gulp-sequence')//同步执行
var gulpLess = require('gulp-less')
var clean = require('gulp-clean')//清除文件插件
var imagemin = require('gulp-imagemin')//压缩图片

var buildBasePath = 'dist/' //构建输出目录

//删除dist文件
gulp.task('clean', function () {
    return gulp.src(buildBasePath, { read: false })
        .pipe(clean())
})

//复制文件夹
gulp.task('copy', function () {
    return gulp.src('src/css/**/*')
        .pipe(gulp.dest(buildBasePath + 'plugins'))
})
gulp.task('copyimg', function () {
    //如果下面执行了md5资源文件img，那么这步可以省略
    return gulp.src('src/img/**/*')
        .pipe(gulp.dest(buildBasePath + 'img'));
});

//HTML压缩
gulp.task('htmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: false,//压缩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
    }
    return gulp.src('src/*.html')
        .pipe(gulpRemoveHtml())
        .pipe(removeEmptyLines())
        .pipe(htmlmin(options))
        .pipe(gulp.dest(buildBasePath))
})


gulp.task('gulpLess', function () {
    return gulp.src('src/css/*.less')
        .pipe(gulpLess())
        .pipe(gulp.dest('src/css'))
})

//合并js、css文件之后压缩代码
//JS文件压缩
gulp.task('uglify', function () {
    return gulp.src('src/js/**/*.js')
        .pipe(concat('build.js'))//合并到一个js
        .pipe(gulp.dest(buildBasePath + 'js'))//输出到js目录
        .pipe(uglify())//压缩到一行
        .pipe(concat('build.min.js'))//压缩后的js
        .pipe(gulp.dest(buildBasePath + 'js'))//输出到Js目录
})

//jsmd5，压缩后并用md5进行命名，下面使用revCollector进行路径替换
gulp.task('minifyjsmd5', function () {
    return gulp.src('src/js/**/*.js')
        .pipe(concat('build.min.js'))//压缩后的Js
        .pipe(uglify())//压缩js到一行
        .pipe(rev())//文件名加MD5后缀
        .pipe(gulp.dest(buildBasePath + 'js'))//输出到js目录
        .pipe(rev.manifest('rev-js-manifest.json'))//生成一个rev-manifest.json
        .pipe(gulp.dest('rev'))
})

//css
gulp.task('minifycss', function () {
    return gulp.src('src/css/**/*.css')
        .pipe(concat('build.css'))//合到一个css
        .pipe(gulp.dest(buildBasePath + 'css'))
        .pipe(gulpCleanCss())//压缩css到一行
        .pipe(concat('build.min.css'))//压缩后的css
        .pipe(gulp.dest(buildBasePath + 'css'))
})

//cssmd5,压缩后并用md5进行命名，下面使用revCollector进行路径替换
gulp.task('minifycssmd5', function () {
    return gulp.src('src/css/**/*.css')
        .pipe(concat('build.min.css'))//压缩后的css
        .pipe(gulpCleanCss())
        .pipe(rev())//文件名加MD5后缀
        .pipe(gulp.dest(buildBasePath + 'css'))
        .pipe(rev.manifest('rev-css-manifest.json'))//生成一个rev-manifest.json
        .pipe(gulp.dest('rev'))//将rev-manifest.json保存到rev目录内
})

//imgmd5,压缩后并用md5进行命名，下面使用revCollector进行路径替换
gulp.task('minifyimgmd5', function () {
    return gulp.src(['src/img/**/*.jpg', 'src/img/**/*.png', 'src/img/**/*.gif'])
        .pipe(rev())//文件名后面加md5后缀
        .pipe(gulp.dest(buildBasePath + 'img'))
        .pipe(rev.manifest('rev-img-manifest.json'))
        .pipe(gulp.dest('rev'))
})

//生产使用，替换文件名，common.js替换为build.min.js
gulp.task('replacejs', function () {
    return gulp.src([buildBasePath + '*.html'])
        .pipe(replace('common.js', 'build.min.js'))
        .pipe(gulp.dest(buildBasePath))
})

//生产使用，替换文件名,common.css替换为build.min.css
gulp.task('replacecss', function () {
    return gulp.src([buildBasePath + '*.html'])
        .pipe(replace('style.css', 'build.min.css'))
        .pipe(gulp.dest(buildBasePath))
})

//开发使用，替换文件名，common.js替换为build.js
gulp.task('replacejsDev', function () {
    return gulp.src([buildBasePath + '*.html'])
        .pipe(replace('common.js', 'build.js'))
        .pipe(gulp.dest(buildBasePath))
})

//开发使用，替换文件名，common.css替换为build.css
gulp.task('replacecssDev', function () {
    return gulp.src([buildBasePath + '*.html'])
        .pipe(replace('style.css', 'build.css'))
        .pipe(gulp.dest(buildBasePath))
})

//使用rev替换成md5文件名，这里包括html和css的资源文件也一起
gulp.task('rev', function () {
    //html,针对js/css/img
    return gulp.src(['rev/**/*.json', buildBasePath + '**/*.html'])
        .pipe(revCollector({ replaceReved: true }))
        .pipe(gulp.dest(buildBasePath))
})

gulp.task('revimg', function () {
    //css，主要针对img替换
    return gulp.src(['rev/**/rev-img-manifest.json', buildBasePath + 'css/*.css'])
        .pipe(revCollector({ replaceReved: true }))
        .pipe(gulp.dest(buildBasePath + 'css'))
})

//监视文件的变化，有修改时，自动调用defautdev缺省默认任务
gulp.task('watch', function () {
    gulp.watch('**/*.html', ['default']);
});
//监视文件的变化，有修改时，自动调用default2缺省默认任务
gulp.task('watch2', function () {
    gulp.watch('**/*.html', ['default2']);
});
//监视文件的变化，有修改时，自动调用defaultdev缺省默认任务
gulp.task('watchdev', function () {
    gulp.watch('**/*.html', ['defaultdev']);
});

gulp.task('default', function (cb) { gulpSequence('clean', 'copy', 'minifyjsmd5', 'minifycssmd5', 'minifyimgmd5', 'htmlmin', 'replacejs', 'replacecss', 'rev', 'revimg')(cb); });

gulp.task('default2', function (cb) { gulpSequence('clean', 'copy', 'copyimg', 'uglify', 'minifycss', 'htmlmin', 'replacejs', 'replacecss')(cb); });

gulp.task('defaultdev', function (cb) { gulpSequence('clean', 'copy', 'copyimg', 'uglify', 'minifycss', 'htmlmin', 'replacejsdev', 'replacecssdev')(cb); });