未加星标

Tutorial: Using Gulp with htmlprocess andconcatenate

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

Tutorial: Using Gulp with htmlprocess andconcatenate

I’ve been teaching myself Gulp recently. I found the basics easy to pick up. Although I didn’t consider myself a Grunt expert, I’d taught myself Grunt previously and that helped with me with Gulp.

Before we go further, check out the GitHub repository that contains the finished example project we’ll go over here: https://github.com/johnfmorton/using-gulp-htmlprocess-example

One thing I have seen in both Grunt and Gulp workflows I’ve used from their repositories was a script code block that looks like the following.

<!--build:jsallscripts.min.js-->
<scriptsrc="script1.js"></script>
<scriptsrc="script2.js"></script>
<scriptsrc="script3.js"></script>
<!--/build-->

This is a really cool block of code.

During your development loading in this HTML file, three separate script files would be loaded into your page. These individual script files help break up your code into more managible chunks.

The comment tags surrounding the 3 script tags give a hint as to what’s going to happen when using the Grunt or Gulp workflow. You would type in something like gulp processfiles and your workflow would take the HTML file and do various types on it and output a set production ready files.

In the process those three separate script includes would be concatenated and minified into a single script file and the HTML itself would be altered to use the included for only the minified file. It’s magic.

I had seen this set up workflows other people had created but recently I’ve been working on my own custom workflow for project I am doing. I wanted a similar concatenate/minify process in my own files. The trouble was I didn’t know how to do this after reading the documentation for the various Gulp plug-ins I was using. Sometimes I find the documentation a little dry.

Luckily, I’ve got it working now so I thought I would document what I did in case it helps others get this working. By others, I’m including myself, because I assume I will stumble upon this post at a later date when I’m searching for this solution again.

First of all, I’m only referencing Gulp as I go through this, but this post can be applied to Grunt fairly easily because Grunt, like Gulp, is just javascript.

So, given that this is going to be a Gulp workflow we have a number of plug-ins to add. Each Gulp plug-in is used for a discrete piece of functionality; it is kept intentionally single-focused. That is why you sometimes have what might seem like a large number of plugins when you wan to accomplish fairly tasks.

In terminal, start by making your package file.

npm init

You can just use the defaults or modify them as you see fit. I end up with a package.json file that looks like this.

{
"name":"gulp-htmlprocessing-example",
"version":"0.0.1",
"description":"SampleprojectforGulpHTMLProcessing",
"main":"gulpfile.js",
"scripts":{
"test":"echo\"Error:notestspecified\"&&exit1"
},
"author":"JohnMorton",
"license":"ISC"
}

Now install the gulp module:

npm install gulp --save-dev

Then install gulp-processhtml :

npm install gulp-processhtml --save-dev

Then install gulp-concat :

gulp-concat

Lastly, we’ll install del , which is short for delete . It’s not a Gulp plugin, but a more basic node module. (See the Gulp doc for specifics on using del here .)

npm install del --save-dev

Now your package.json file should basically look like this:

{
"name":"gulp-htmlprocessing-example",
"version":"0.0.1",
"description":"SampleprojectforGulpHTMLProcessing",
"main":"gulpfile.js",
"scripts":{
"test":"echo\"Error:notestspecified\"&&exit1"
},
"author":"JohnMorton",
"license":"ISC",
"devDependencies":{
"del":"^1.2.0",
"gulp":"^3.9.0",
"gulp-concat":"^2.6.0",
"gulp-processhtml":"^1.1.0"
}
}

You will now also have a new directory called note_modules . It will contain the things we have just installed.

To make this test project work, we need a very basic HTML page built. It’s part of the github repository that I’ve created for this post, but here’s the basic structure of the files we need:

dev
├──index.html
├──script1.js
├──script2.js
└──script3.js

At a minimum, the index.html file will need to have the script tag mentioned at the beginning of this article. The script#.js files can each have a console.log message in them.

Now it is time to create your gulpfile.js. You may do this from within the terminal by typing touch gulpfile.js and hitting enter. Open this file up in your text editor.

Let’s get all the modules we’ve installed stored in variables at the top of our gulpfile.js .

//dependencies
vargulp=require('gulp');
varprocesshtml=require('gulp-processhtml');
varconcat=require('gulp-concat');
vardel=require('del');

Now, let’s write our first Gulp task and name it “processhtml”.

gulp.task('processhtml',function(){
//removeexistingreplace

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: GulpGruntHTMLGitGitHub
分页:12
转载请注明
本文标题:Tutorial: Using Gulp with htmlprocess andconcatenate
本站链接:http://www.codesec.net/view/481690.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(28)