完成nodejs安装之后,需要使用npm安装gulp。
先安装全局gulp
npm install -g gulp然后在项目根目录下安装本地gulp。
此时项目根目录下会多出下面这个文件夹 node_modules
好的,现在gulp已经安装完成了,但是gulp本身不提供js压缩合并等功能,需要使用gulp的相关插件。目前只需要完成js压缩合并和css文件压缩的功能,先安装相应的插件:
1.css压缩 gulp-minify-css
2.js压缩 gulp-uglify
3.js合并 gulp-concat
由于压缩之前需要对js代码进行代码检测,压缩完成之后需要加上min的后缀,我们还需要安装另外两个插件:
将多个js文件合并为一个js文件的方法是使用查找拷贝粘贴法 :
1、打开网站主页,然后右击鼠标,选择“查看源码”。再按CTRL+F快捷键调出搜索框,在搜索框中输入
script type='text/javascript'
2、回车确定后。选择“高亮全部”,就能看见网页中有多少个外部javascript文件了。如下图,head中有两个外部JavaScript。一般在footer部分也能找到外部JavaScript。
3、合并多个js
(1)在网站根目录下面创建一个文件,命名为main.js。然后编辑main.js文件。
需要将外部JavaScript文件的内容全部粘贴到main.js文件中。
(2)按CTRL+A选择全部内容,然后CTRL+C复制全部内容,将内容粘贴到main.js文件中。再点击下一个JavaScript文件的 src 地址,依次它们的内容粘贴到main.js文件中。最后保存。
(3)引用main.js文件
main.js创建好以后,需要在wordpress主题文件夹的footer.php文件中引用main.js。footer.php文件的路径一般为/var/www/html/wp-content/themes/themename/footer.php。