正文

json前端项目gulp设置(代码片段)

author  author  2023-01-19  340

关键词：


  "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（gulp4）基本的gulpfile前端入门套件(代码片段)

查看详情

gulp的使用流程(代码片段)

GULP的使用流程Gulp是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。一、建... 查看详情

学写网站前端配置之glup(代码片段)

前端使用gulp来自动化开发流程。gulp会非常方便进行前端管理。安装gulp：npminstallgulp-g#将gulp安装至全局因为在本地需要使用require的方式gulp。因此也需要在本地安装一份：npminstallgulp--save-dev #将gulp安装至本地，并保存至package.... 查看详情

javascript适用于wordpress的gulp设置代码段也可用于前端开发(代码片段)

查看详情

前端构建之--gulp(代码片段)

gulp相关插件：1、del删除文件，用于清空文件2、browser-sync用于自动刷新浏览器3、gulp-htmlmin用于压缩html4、gulp-clean-css压缩css5、gulp-uglify压缩js6、gulp-replace替换路径7、gulp-base64将小图背景图转换为base64的形式，可以自己设置最大多... 查看详情

前端自动化之项目搭建

1.先安装全局的gulp$npminstall--globalgulp2.npm初始化，在项目内创建package.json文件npminit3.项目文件路径下，将gulp安装到项目内。$npminstall--save-devgulp4.创建gulp主文件==》gulpfile.js 5.编写gulpfile.js测试代码：vargulp=require(‘gulp‘);gulp.ta 查看详情

gulp入门(代码片段)

...几天在寻找压缩js文件的工具，开始接触到gulp这款出色的前端代码部署工具，看了官方文档和一些资料，学会了怎么使用gulp进行压缩，特地写个简单的入门操作指南，加深自己的印象。gulp能够实现很多功能，在这里我就以自己... 查看详情

gulp

1.gulp介绍(http://www.gulpjs.com.cn/)gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；大大提高我们的工作效率... 查看详情

前端自动化构建之gulp(代码片段)

...了，每次都是用脚手架搭好的文件，在无形中体验了一波前端自动化带来的方便。然后前一段时间才开始学习前端自动化。基本介绍gulp说得简单一点就是一个自动化把前端的各种工具以流的方式一步一步的按照设置的规定加载... 查看详情

glup快速入门整理(代码片段)

...p介绍中文主页:http://www.gulpjs.com.cn/gulp是与grunt功能类似的前端项目构建工具,也是基于Nodejs的自动任务运行器能自动化地完成javascript/coffee/sass/less/html/image/css等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等... 查看详情

gulp(代码片段)

gulp基本命令npmigulp-g//仅在首次执行需要npminit-y//生成package.json文件npmigulp@3--save-dev//在当前项目中安装gulpnpmigulp-concat--save-dev//合并文件npmigulp-uglify--save-dev//压缩混淆js//压缩cssnpmigulp-cssmin--save-dev//压缩htmlnpminst 查看详情

gulp系列之快速入门篇(代码片段)

...作。安装gulp命令行实用程序npminstall--globalgulp-cli创建一个项目目录并浏览npxmkdirpmy-projectcdmy-project在您的项目目录中创建package.json文件npminit这将指导您为项目命名，版本，说明等。在您的devDependencies中安装gulp软件包npminstall--save-d... 查看详情

node.js使用教程-2.gulp打包构建入门与使用(代码片段)

前言gulp是一个前端项目开发的自动化打包构建工具,类似的打包工具还有webpack。前端开发的过程中，会写到js文件，css文件，我们的项目如果想上线，那么一定要体积小一点，就需要对原始的代码进行编译压缩... 查看详情

html开始一个项目（gulp）(代码片段)

查看详情

gulp教程之自动添加版本号(代码片段)

1创建项目安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件，项目目录如下：2自动更改版本号插件简介gulp-rev为css文件中引入的图片或字体等添加hash编码gulp-asset-rev为js/css文件生成hash编码并生成rev-manifest.json文件... 查看详情

gulp构建工作流(代码片段)

...ge.json的文件）2.添加一个gulp的依赖npminstallgulp--save-dev3.在项目根目录下添加一个gulpfile.js文件，这个是gulp的主文件，这个文件名是固定的4.在gulpfile中抽象我们需要做的任务需要做的任务有：1.LESS编查看详情

gulp从多个json文件创建一个json文件(代码片段)

我正在使用gulp，我想从多个json文件创建一个json文件。我的每个src文件都是对象，结果应该是所有src对象的数组例如：srcfolderfile1.json"id":1,"name":"1"file2.json"id":2,"name":"2"file3.json"id":3,"name":"3"theresultfileshouldlooklikethis["id":1, 查看详情

gulp的简介以及使用方法(代码片段)