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设置的主要内容,如果未能解决你的问题,请参考以下文章

前端自动化之项目搭建

前端自动化构建工具gulp使用

前端构建工具gulp.js的使用介绍及技巧

json (Gulp 4)基本的gulpfile前端入门套件

《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用

前端自动化构建工具Gulp简单入门