json 前端项目gulp设置
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了json 前端项目gulp设置相关的知识,希望对你有一定的参考价值。
{
"name": "kangerjie",
"version": "1.0.0",
"bin": {
"jshint": "node_modules/.bin/jshint",
"grunt": "node_modules/.bin/grunt",
"gulp": "node_modules/.bin/gulp",
"bower": "node_modules/.bin/bower",
"http-server": "node_modules/.bin/http-server"
},
"scripts": {
"pretest": "jshint client/js",
"deps": "bower install",
"build": "gulp buildfront",
"debug": "gulp bs",
"start": "http-server -p 8888 client/public"
},
"dependencies": {},
"optionalDependencies": {},
"devDependencies": {
"bower": "^1.7.1",
"browser-sync": "^2.10.1",
"generator-webapp": "^1.1.0",
"grunt-cli": "^0.1.13",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-header": "^1.7.1",
"gulp-imagemin": "^2.4.0",
"gulp-jshint": "^2.0.0",
"gulp-minify-css": "^1.2.2",
"gulp-minify-html": "^1.0.4",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.1",
"gulp-watch": "^4.3.5",
"http-server": "^0.8.5",
"imagemin-pngquant": "^4.2.0",
"jshint": "^2.5.6",
"yo": "^1.5.0"
},
"repository": {
"type": "git",
"url": "https://gitlab.com/servicepal/kangerjie.git"
},
"description": "Kang Er Jie"
}
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
cssmin = require('gulp-minify-css'),
hmin = require('gulp-minify-html'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
watch = require('gulp-watch'),
bs = require('browser-sync');
gulp.task('default', ['buildfront'], function() {
});
// build front end
gulp.task('buildfront', ['js', 'deps', 'css', 'html', 'imgs']);
// build javascripts
gulp.task('js', function () {
return gulp.src('client/js/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('kmain.js'))
.pipe(gulp.dest('client/public/js'));
});
// copy 3rd party lib deps
gulp.task('deps', function(){
// bootstrap
gulp.src('bower_components/bootstrap/dist/js/bootstrap.min.js')
.pipe(gulp.dest('client/public/js'));
gulp.src('bower_components/bootstrap/dist/css/bootstrap*.min.css')
.pipe(gulp.dest('client/public/css'));
gulp.src('bower_components/bootstrap/dist/css/bootstrap*.min.css.map')
.pipe(gulp.dest('client/public/css'));
gulp.src('bower_components/bootstrap/dist/fonts/*.svg')
.pipe(gulp.dest('client/public/fonts'));
// jquery
return gulp.src('bower_components/jquery/dist/jquery.min.js')
.pipe(gulp.dest('client/public/js'));
});
// build styles
gulp.task('css', function(){
return gulp.src('client/css/**/*.css')
.pipe(concat('kmain.css'))
.pipe(cssmin())
.pipe(gulp.dest('client/public/css'));
});
// build images
gulp.task('imgs', () => {
return gulp.src('client/images/**/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('client/public/images'));
});
// build html
gulp.task('html', function(){
var opts = {
conditionals: true,
spare:true
};
gulp.src('client/index.html')
.pipe(hmin(opts))
.pipe(gulp.dest('client/public'));
return gulp.src('client/views/**/*.html')
.pipe(hmin(opts))
.pipe(gulp.dest('client/public/views'));
});
gulp.task('watch', ['buildfront'], function () {
var files = [
'client/index.html',
'client/views/**/*.html',
'client/js/**/*.js',
'client/css/**/*.css'
];
return gulp.watch(files, ['buildfront']);
});
gulp.task('bs', ['watch'], function() {
bs({
files: "**",
server: {
baseDir: "client/public"
}
});
});
{
"name": "client",
"description": "",
"main": "",
"moduleType": [],
"authors": [
"Bin Wu"
],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "1.11.3",
"bootstrap": "3.3.6"
},
"private": true
}
以上是关于json 前端项目gulp设置的主要内容,如果未能解决你的问题,请参考以下文章
json (Gulp 4)基本的gulpfile前端入门套件