gulp | 易学教程

Gulp copy single file (src pipe dest) with wildcarded directory

阅读更多关于 Gulp copy single file (src pipe dest) with wildcarded directory

问题 I am trying to copy a specific file src C:\Project\dir1\dirv-1.0.0\tools\file.exe to a specific directory dest C:\Project\dir2\ using gulp. The version number in dirv-1.0.0 could change in the future, so I want to wildcard the version number. Here is the task I have for that ( gulpfile.js is in C:\Project ): gulp.task('copy', function(){ return gulp .src('dir1\dirv-*\tools\file.exe') .pipe(gulp.dest('dir2')); }); This ends up generating the following dest file: C:\Project\dir2\dirv-1.0.0

Gulp copy single file (src pipe dest) with wildcarded directory

阅读更多关于 Gulp copy single file (src pipe dest) with wildcarded directory

Have gulp dynamically write css in the same directory as the processed scss file

阅读更多关于 Have gulp dynamically write css in the same directory as the processed scss file

问题 I am looking to write my gulpfile.js scan the themes directory for style.scss files, and the idea is to read the style.scss file and write the corresponding style.css & .min file in the same directory. The issue that i'm having is that I can't find a way to write the css file without knowing exactly what the directory is... which I will not. Is this possible with the gulp.dest()? tl;dr: Essentially... how can I determine the current path of the *.scss file being processed so that I can place

Dynamically include css or Js file using php

阅读更多关于 Dynamically include css or Js file using php

问题 Every time Gulp changes the CSS or JS files it keep the output file name same as before. How will browser know that file has been changed and need to reload the css and JS files? To resolve this problem, I am decide to use the following Gulp plugin: https://github.com/sindresorhus/gulp-rev it rename the assets file by appending content hash to filenames unicorn.css => unicorn-098f6bcd.css is there any way to include the assets file using php dynamically? Assets name will change every time

how to handle assets from different folders in gulp

阅读更多关于 how to handle assets from different folders in gulp

问题 I have list of glob patterns: var assets = [ '../projects.a/dir1/dir2/file1.js', '../projects.b/dir1/dir2/file2.js', './app/scripts/dir1/dir2/module.js' ]; I want to create a task that will copy all the files that represented by those patterns to my dest folder, and keep the structure . For example, in my dest folder I want the following: 'dest/projects.a/dir1/dir2/file1.js', 'dest/projects.b/dir1/dir2/file2.js', 'dest/app/scripts/dir1/dir2/module.js' I built the following task: gulp.task(

Automate Git commit + versioning + tag by npm node

阅读更多关于 Automate Git commit + versioning + tag by npm node

问题 What I have been trying to get is, work with npm version to update the package.json and create a tag and then commit my changes. In this way, I will be able to have tags by version, auto versioning and commit with the info. The problem I am having is, when I am using npm version, it's doing a tag + commit automatically and then it can not be done if you have previously some changes, So for me, it doesn't make sense to increase the version of your project, before to do the changes

gulp - compiling Vue component without `require`

阅读更多关于 gulp - compiling Vue component without `require`

问题 I'm trying to understand how to build a component with Gulp. At this time, I have a Vue component that looks like this: my-component.vue <template> <div class="foo"> </div> </template> <script> export default { data() { return {}; }, props: { message: { type: String, default: '' } }, methods: { display: function() { alert(this.message); } }, }; </script> I'm building this component via Gulp. My gulpfile.js has the following: gulpfile.js const gulp = require('gulp'); const vueify = require(

前端工程化

阅读更多关于前端工程化

前端工程化 gulp理解： 1、首先是初始化工程，命令行执行 npm init 然后设置工程名称、版本号、描述等一系列内容，执行完后，就会在项目生成一个package.js文件。 2、其次是搭建gulp环境，如果之前没有全局安装过gulp，应该先全局安装一次，命令行执行：npm install gulp --global。如果已经安装过，则不需要二次安装。只需要在当前项目中安装gulp依赖：npm install gulp --save-dev ( -D )，安装完后会在当前文件夹下生成一个node_modules文件夹 3、建立一个gulpfile.js文件,在里面做相关的配置，如导入依赖模块，建立任务等。如果依赖模块没有安装，则需要提前安装依赖模块。 4、建立任务用到4个api功能gulp.task()、gulp.src()、gulp.dest()、gulp.watch()和.pipe()方法 >在过去前端开发一直没有完善的一些代码处理等工具来辅助开发，而nodejs火起来之后，很多基于node环境的工具诞生之后对前端开发造成了冲击，慢慢的，使用这些工具来完成项目的搭建和开发这样的方式被成为前端工程化为什么使用工程化来开发项目 >现在的项目不管从规模还是复杂度上都有很大的提高，所以，如何能快速的搭建环境，以及高效的代码管理，后期处理成为了衡量前端工程师技术的一个标准

前端工程化浅析

阅读更多关于前端工程化浅析

在过去前端开发一直没有完善的一些代码处理等工具来富足开发，而nodejs火起来之后，很多基于node环境的工具诞生之后对前端开发造成了冲击，慢慢的，使用这些工具来完成项目的搭建和开发这样的方式被称为前端工程化。使用工程化开发项目原因：现在的项目不论是规模还是复杂度都有很大程度提高，所以如何快速搭建环境以及搞笑的代码管理，后期处理成为了衡量前端工程师技术的标准工程化帮我们：构造环境变得简单、自动化，代码的压缩合并，模块化，抽离都能一步完成，减少了后期处理成本。现有的工程化工具： grunt、gulp是自动化构建工具，webpack是模块化打包工具，bower、npm是包管理工具 gulp使用方式：基于流的自动化构建工具。因为gulp运行在nodejs中，所以遵循commonjs模块化规范，gulp使用通过创建和执行任务来完成关键方法： 1.gulp.task()创建任务 2.gulp.src()查找资源文件 3.gulp.desk()输出文件 4.gulp.watch(）监听文件内容变化 5. .pipe()可以对文件进行处理 gulp只提供查找、监听文件，处理后输出文件，但是如何处理都不属于gulp的功能范围工程化的实现： 1、建立项目目录 2、在项目中执行npm init应该有一个package.json文件，标注项目相关信息。 3、选择gulp + gulp

前端工程化讲解

阅读更多关于前端工程化讲解

一、什么叫做前端工程化在过去前端开发一直没有完善的一些代码处理等工具来辅助开发，而nodejs火起来之后，很多基于node环境的工具诞生之后对前端开发造成了冲击，慢慢的，使用这些工具来完成项目的搭建和开发这样的方式被成为前端工程化二、为什么使用工程化来开发项目现在的项目不管从规模还是复杂度上都有很大的提高，所以，如何能快速的搭建环境，以及高效的代码管理，后期处理成为了衡量前端工程师技术的一个标准三、工程化之后能帮助我们做到什么？构建环境变得简单和自动化，代码的压缩合并，模块化，抽离都能一步完成，减少了后期处理成本。四、现有的工程化工具目前市场上有很多自动化工具供我们选择： grunt、gulp都是自动化构建工具，webpack是模块化打包工具，bower、npm是包管理工具五、Gulp的使用方式 gulp是一款目前比较流行的基于流的自动化构建工具，因为gulp是运行在nodejs中，所以说也遵循 CommonJS模块化规范，gulp的使用就是通过创建任务和执行任务来完成关键方法: 1. gulp.task()创建任务 2. gulp.src()查找资源文件 3. gulp.dest()输出文件 4. gulp.watch()监听文件内容变化 5. .pipe()可以对文件进行处理 gulp提供的只是查找文件，监听文件，处理后输出文件

订阅 gulp