Gulp Best Practices (including js,css,html precompilation, merging, compression, Automatic browser refresh)

<span id="Label3"></p> <blockquote> <blockquote> <p>Gulp is a flow-based automated build tool<br>Official Website: http://www.gulpjs.com.cn/</p> </blockquote> </blockquote>first, Install the required modules<p><p><strong>1, New package.json, Enter the following content</strong></p></p><pre class="brush:javascript;gutter:true;"><pre class="brush:javascript;gutter:true;">{ "name": "autopractice", "version": "1.0.0", "description": "", "main": "index.js", "scripts" : { "test": "echo \" error:no test specified\ "&& exit 1" }, "author": "", "license": "ISC", <c11 /> "dependencies": { "browser-sync": "^2.10.1", "coffee-script": "^1.10.0", "gulp": "^3.9.0", " Gulp-clean ":" ^0.3.1 ", " gulp-coffee ":" ^2.3.1 ", " gulp-concat ":" ^2.6.0 ", " gulp-connect ":" ^2.3.1 ", "gulp-jade": "^1.1.0", "gulp-jshint": "^2.0.0", "gulp-less": "^3.0.5", "gulp-livereload": "^ 3.8.1 ", " gulp-minify-css ":" ^1.2.2 ", " gulp-plumber ":" ^1.0.1 ", " gulp-uglify ":" ^1.5.1 ", " Gulp-webpack ":" ^1.5.0 ", " Jade ":" ^1.11.0 ", " jshint ":" ^2.8.0 " }}</pre></pre><p><p><strong>2. command<code>npm install</code></strong></p></p><pre class="brush:bash;gutter:true;"><pre class="brush:bash;gutter:true;">NPM Install</pre></pre>second, the Configuration Gulp<p><p>After the plug-in is installed, we need to create a new <code>gulpfile.js</code> file to specify what Gulp needs to accomplish for us.</p></p> <blockquote> <blockquote> <p>Code description See explanation, If you have any questions, please check the official introductory manual, the URL on the above</p> </blockquote> </blockquote><pre class="brush:javascript;gutter:true;">Import Required modules var gulp = require (' gulp '), less = require (' gulp-less '), jade = require (' gulp-jade '), coffee = require ( ' Gulp-coffee '), concat = require (' gulp-concat '), uglify = require (' gulp-uglify '), Browsersync = require (' browser- Sync '). Create (), plumber = require (' gulp-plumber '), minifycss = require (' gulp-minify-css ');//compile less, where plumber is to prevent errors from collapsing The plug-in gulp.task (' less ', function () {gulp.src (' src/less/*.less '). pipe (plumber ()). pipe (less ()). pip E (gulp.dest (' dist/css ')); /compile jadegulp.task (' Jade ', function () {gulp.src (' src/jade/*.jade '). pipe (plumber ()). pipe (jade ()) . pipe (gulp.dest (' Public ');}); /compile coffeegulp.task (' Coffee ', function () {gulp.src (' src/coffee/*.coffee '). pipe (plumber ()). pipe (coffee ( ). pipe (gulp.dest (' dist/js ');}); /connect all CSS files to a file and compress and save to Public/cssgulp.task (' concatcss ', function () {gulp.src ([' dist/css/*.css ')]. pipe (concat (' MAIN.CSS '). Pipe (minifycss ()) . pipe (gulp.dest (' public/css ');}); /connect all JS files to a file and compress, save to Public/jsgulp.task (' Concatjs ', function () {gulp.src ([' dist/js/*.js ']). pipe (concat (' main '). JS '). pipe (uglify ()). pipe (gulp.dest (' public/js ');}); /default task Gulp.task (' default ', [' watch ']);//listener task gulp.task (' watch ', function () {//set up browser to automatically refresh server Browsersync.init ({ Server: {baseDir: "public"}}); pretreatment gulp.watch (' src/jade/** ', [' Jade ']); Gulp.watch (' src/coffee/** ', [' Coffee ']); Gulp.watch (' src/less/** ', [' less ']); Merge compressed Gulp.watch (' dist/css/*.css ', [' concatcss ']); Gulp.watch (' dist/js/*.js ', [' Concatjs ']); Auto Refresh Gulp.watch (' public/** ', function () {browsersync.reload (); });});</pre>third, Testing<p><p>Console Run<code>gulp</code></p></p><pre class="brush:bash;gutter:true;"><pre class="brush:bash;gutter:true;">Gulp</pre></pre><p><p><span style="line-height: 1.5;">The browser will open automatically</span></p></p><p><p>Modify any file, the browser automatically refreshes<br></p></p><p><p>Turn from: 1190000004165055 Modified</p></p><p><p>Gulp Best Practices (including js,css,html precompilation, merging, compression, Automatic browser refresh)</p></p></span>