Gulp.js基礎入門教程_html/css_WEB-ITnose

來源：懂視網責編：小采時間：2020-11-27 16:37:05

Gulp.js基礎入門教程_html/css_WEB-ITnose

Gulp.js基礎入門教程_html/css_WEB-ITnose: 創建項目文件夾進入項目文件夾初始化項目使用npm命令: npm init ,根據提示完成。安裝 Gulp 進入項目文件夾,使用Node的包管理命令npm進行安裝. 全局安裝 npm install -g gulp 項目依賴中安裝 npm instal

推薦度：

點擊下載本文 文檔為doc格式

導讀Gulp.js基礎入門教程_html/css_WEB-ITnose: 創建項目文件夾進入項目文件夾初始化項目使用npm命令: npm init ,根據提示完成。安裝 Gulp 進入項目文件夾,使用Node的包管理命令npm進行安裝. 全局安裝 npm install -g gulp 項目依賴中安裝 npm instal

創建項目文件夾

進入項目文件夾

初始化項目

使用npm命令: npm init ,根據提示完成。

安裝 Gulp

進入項目文件夾,使用Node的包管理命令npm進行安裝.

全局安裝

npm install -g gulp

項目依賴中安裝

npm install --save-dev gulp

創建Gulp配置文件

在項目根目錄新建配置文件 gulpfile.js

設置配置信息

以常見的Gulp插件為例,如下：

js代碼校驗(gulp-jshint)
合并js文件(gulp-concat)
壓縮js代碼(gulp-uglify)
sass的編譯(gulp-sass)
less的編譯(gulp-less)
壓縮css(gulp-minify-css)
重命名(gulp-rename)

這些插件的安裝命令如下:

npm install gulp-jshint gulp-concat gulp-uglify gulp-sass gulp-less gulp-minify-css gulp-rename --save-dev

完整配置文件:

// 引入 gulpvar gulp = require('gulp');// 引入組件var jshint = require('gulp-jshint');var concat = require('gulp-concat');var uglify = require('gulp-uglify');var sass = require('gulp-sass');var less = require('gulp-less');var minifycss = require('gulp-minify-css');var rename = require('gulp-rename');// 檢查js腳本gulp.task('lint', function() { gulp.src('./src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default'));});// 合并,壓縮js文件gulp.task('scripts', function() { gulp.src('./src/js/*.js') //合并js文件 .pipe(concat('all.js')) //給文件添加.min后綴 .pipe(rename({ suffix: '.min' })) //壓縮腳本文件 .pipe(uglify()) .pipe(gulp.dest('./dist/js'));});// 編譯sassgulp.task('sass', function() { gulp.src('./src/scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css'));});// 編譯lessgulp.task('sass', function() { gulp.src('./src/less/*.less') .pipe(less()) .pipe(gulp.dest('./css'));});// 壓縮cssgulp.task('style', function() { gulp.src('./src/css/*.css') .pipe(gulp.dest('./dist/style')) .pipe(rename('all.min.css')) .pipe(minifycss()) .pipe(gulp.dest('./dist/style'));});// 默認任務gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); // 監聽文件變化 gulp.watch('./src/js/*.js', function(){ gulp.run('lint', 'scripts'); }); gulp.watch('./src/sass/*.scss', function(){ gulp.run('sass'); }); gulp.watch('./src/less/*.less', function(){ gulp.run('less'); }); gulp.watch('./src/css/*.css', function(){ gulp.run('style'); });});

本作品由 SeayXu 創作，采用知識共享署名-相同方式共享 4.0 國際許可協議進行許可。

基于http://git.seay.me上的作品創作。

可自由轉載、引用，但需署名作者且注明文章出處，并以相同方式共享。

本文鏈接:

Gulp.js基礎入門教程

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com