資訊專欄INFORMATION COLUMN
摘要：完成安裝之后，需要使用安裝。此時(shí)項(xiàng)目根目錄下會(huì)多出下面這個(gè)文件夾好的，現(xiàn)在已經(jīng)安裝完成了，但是本身不提供壓縮合并等功能，需要使用的相關(guān)插件。使用，現(xiàn)在可以使用了，在項(xiàng)目根目錄下創(chuàng)建文件。任務(wù)完成，只需要將中，引用的路徑修改成新的路徑即可。
1.安裝gulp
gulp是基于Node.js的前端構(gòu)建工具。所以首先需要安裝nodejs，安裝nodejs。
完成nodejs安裝之后，需要使用npm安裝gulp。
先安裝全局gulp
npm install -g gulp
然后在項(xiàng)目根目錄下安裝本地gulp。
此時(shí)項(xiàng)目根目錄下會(huì)多出下面這個(gè)文件夾 node_modules
好的，現(xiàn)在gulp已經(jīng)安裝完成了，但是gulp本身不提供js壓縮合并等功能，需要使用gulp的相關(guān)插件。目前只需要完成js壓縮合并和css文件壓縮的功能，先安裝相應(yīng)的插件：
1.css壓縮 gulp-minify-css
2.js壓縮 gulp-uglify
3.js合并 gulp-concat
由于壓縮之前需要對(duì)js代碼進(jìn)行代碼檢測(cè)，壓縮完成之后需要加上min的后綴，我們還需要安裝另外兩個(gè)插件：
4.重命名 gulp-rename
5.js代碼檢測(cè) gulp-jshint (或gulp-jslint)
(更多插件可以查看 http://gulpjs.com/plugins/ )
在項(xiàng)目根目錄下執(zhí)行以下命令：
npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev
安裝好的插件會(huì)出現(xiàn)在上面提到的node_modules文件夾中。
ok，現(xiàn)在可以使用gulp了，在項(xiàng)目根目錄下創(chuàng)建gulpfile.js文件。
在gulpfile.js中添加以下代碼
var gulp = require("gulp")，
minifycss = require("gulp-minify-css")，
concat = require("gulp-concat")，
uglify = require("gulp-uglify")，
rename = require("gulp-rename")，
jshint=require("gulp-jshint");
//語(yǔ)法檢查
gulp.task("jshint"， function () {
return gulp.src("js/*.js")
.pipe(jshint())
.pipe(jshint.reporter("default"));
});
//壓縮css
gulp.task("minifycss"， function() {
return gulp.src("css/*.css") //需要操作的文件
.pipe(rename({suffix: ".min"})) //rename壓縮后的文件名
.pipe(minifycss()) //執(zhí)行壓縮
.pipe(gulp.dest("Css")); //輸出文件夾
});
//壓縮，合并 js
gulp.task("minifyjs"， function() {
return gulp.src("js/*.js") //需要操作的文件
.pipe(concat("main.js")) //合并所有js到main.js
.pipe(gulp.dest("js")) //輸出到文件夾
.pipe(rename({suffix: ".min"})) //rename壓縮后的文件名
.pipe(uglify()) //壓縮
.pipe(gulp.dest("Js")); //輸出
});
//默認(rèn)命令，在cmd中輸入gulp后，執(zhí)行的就是這個(gè)任務(wù)(壓縮js需要在檢查js之后操作)
gulp.task("default"，["jshint"]，function() {
gulp.start("minifycss"，"minifyjs");
});
上述代碼中的相關(guān)方法可以查看 gulp API docs
在文件根目錄下執(zhí)行g(shù)ulp命令：
(如果Js文件有問(wèn)題時(shí)，會(huì)出現(xiàn)相應(yīng)的error提示，按照提示的錯(cuò)誤信息修改即可)
bingo，現(xiàn)在可以在css文件夾中看到壓縮好的css文件，在js中可以看到合并壓縮好的main.min.js 。任務(wù)完成，只需要將html中css，js引用的路徑修改成新的路徑即可。
增加Sassnpm install gulp-sass --save-dev
"use strict";
var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("sass", function () {
gulp.src("./sass/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("./css"));
});
gulp.task("sass:watch", function () {
gulp.watch("./sass/**/*.scss", ["sass"]);
});
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78385.html
摘要：完成安裝之后，需要使用安裝。此時(shí)項(xiàng)目根目錄下會(huì)多出下面這個(gè)文件夾好的，現(xiàn)在已經(jīng)安裝完成了，但是本身不提供壓縮合并等功能，需要使用的相關(guān)插件。使用，現(xiàn)在可以使用了，在項(xiàng)目根目錄下創(chuàng)建文件。任務(wù)完成，只需要將中，引用的路徑修改成新的路徑即可。 1.安裝gulp gulp是基于Node.js的前端構(gòu)建工具。所以首先需要安裝nodejs，安裝nodejs。 完成nodejs安裝之后，需要使用n...
摘要：所以它在某些程度上，跟的功能有些相同。嚴(yán)格上講，模塊化不是他強(qiáng)調(diào)的東西，他旨在規(guī)范前端開(kāi)發(fā)流程。更是明顯強(qiáng)調(diào)模塊化開(kāi)發(fā)，而那些文件壓縮合并預(yù)處理等功能，不過(guò)是他附帶的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先來(lái)說(shuō)一下 webpack 是什么。 webpack 的...
摘要：通過(guò)本文，我們將學(xué)習(xí)如何使用來(lái)改變開(kāi)發(fā)流程，從而使開(kāi)發(fā)更加快速高效。中文網(wǎng)站詳細(xì)入門教程使用是基于的，需要要安裝為了確保依賴環(huán)境正確，我們先執(zhí)行幾個(gè)簡(jiǎn)單的命令檢查。詳盡使用參見(jiàn)官方文檔，中文文檔項(xiàng)目地址 為了UED前端團(tuán)隊(duì)更好的協(xié)作開(kāi)發(fā)同時(shí)提高項(xiàng)目編碼質(zhì)量，我們需要將Web前端使用工程化方式構(gòu)建； 目前需要一些簡(jiǎn)單的功能： 1. 壓縮HTML 2. 檢查JS 3. 編譯SA...
摘要：常見(jiàn)前端構(gòu)建工具的分類和對(duì)比是附帶的包管理器，是內(nèi)置的一個(gè)功能，允許在文件里面使用字段定義任務(wù)在這里，一個(gè)屬性對(duì)應(yīng)一段腳本，原理是通過(guò)調(diào)用去運(yùn)行腳本命令。 前文 端技術(shù)范圍不斷發(fā)展，前端開(kāi)發(fā)不僅限于直接編寫(xiě)html，css和javascript，Web應(yīng)用日益龐大，代碼也更加龐大，因此許多新的思想（例如模塊化和工程化等）和框架（React和Vue等），以及新的語(yǔ)言（Es6 TypeSc...
閱讀 3693·2021-09-30 09:59
閱讀 2357·2021-09-13 10:34
閱讀 588·2019-08-30 12:58
閱讀 1517·2019-08-29 18:42
閱讀 2213·2019-08-26 13:44
閱讀 2933·2019-08-23 18:12
閱讀 3331·2019-08-23 15:10
閱讀 1634·2019-08-23 14:37
