首先,安装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); });