angularjs – Yeoman Angular app,grunt watch .less files
发布时间:2020-12-17 17:18:54 所属栏目:安全 来源:网络整理
导读:我和Yeoman,grunt,bower,bootstrap和你的Angular应用程序一起玩.我试图制作grunt watch .less文件,但我遇到了一些麻烦. 我当然已经安装了grunt-contrib-less模块 npm install grunt-contrib-less --save-dev 并将它保存到我的package.json. 我已经能够使用代
我和Yeoman,grunt,bower,bootstrap和你的Angular应用程序一起玩.我试图制作grunt watch .less文件,但我遇到了一些麻烦.
我当然已经安装了grunt-contrib-less模块 npm install grunt-contrib-less --save-dev 并将它保存到我的package.json. 我已经能够使用代码在其他项目中完成这项工作: module.exports = function(grunt){ grunt.initConfig({ pkg:grunt.file.readJSON('package.json'),less:{ development:{ options: { paths: ['bower_components/bootstrap/less','bower_components/bootstrap/dist/css'],yuicompress: true },files:{ 'bower_components/bootstrap/dist/css/bootstrap.css' : 'bower_components/bootstrap/less/bootstrap.less',} } },// running 'grunt watch' will watch for changes watch: { files: ['bower_components/bootstrap/less/*.less','bower_components/bootstrap/less/*.less'],tasks: ['less'] } }); grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default',['less']); }; 和: module.exports = function(grunt) { grunt.initConfig({ less: { development: { options: { paths: ["bower_components/bootstrap/less"],yuicompress: true },files: { "bower_components/bootstrap/dist/css/bootstrap.css": "bower_components/bootstrap/less/bootstrap.less" } } },watch: { files: "bower_components/bootstrap/less/*",tasks: ["less"] } }); grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-watch'); }; 但我之前没有尝试过使用Angular应用程序.它也可能是我做错了路由这么简单,但我已经尝试过很多次了我不知道是不是这样. 我已经在Gruntfile.js中有一些监视代码 watch: { bower: { files: ['bower.json'],tasks: ['bowerInstall'] },js: { files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],tasks: ['newer:jshint:all'],options: { livereload: true } },jsTest: { files: ['test/spec/{,tasks: ['newer:jshint:test','karma'] },styles: { files: ['<%= yeoman.app %>/styles/{,*/}*.css'],tasks: ['newer:copy:styles','autoprefixer'] },gruntfile: { files: ['Gruntfile.js'] },livereload: { options: { livereload: '<%= connect.options.livereload %>' },files: [ '<%= yeoman.app %>/{,*/}*.html','.tmp/styles/{,*/}*.css','<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' ] } }, 并希望像(我认为不是真正的功能代码) less: { files: [ '<%= yeoman.app %>/{,*/something.something}*.less' ] tasks: ['less:developer'] }, 观看.less文件并尽可能将其制作成css文件. 解决方法
答案很简单,因为我在问题中有解决方案代码.对我来说唯一困难的事情是在哪里以及如何把它.
首先,我安装了grunt-contrib-less模块??,并在我的样式文件夹而不是bower_components中创建了另一个bootstrap less文件夹(谢谢Mingos!). 'use strict'; // # Globbing // for performance reasons we're only matching one level down: // 'test/spec/{,*/}*.js' // use this if you want to recursively match all subfolders: // 'test/spec/**/*.js' module.exports = function (grunt) { // Load grunt tasks automatically require('load-grunt-tasks')(grunt); // Time how long tasks take. Can help when optimizing build times require('time-grunt')(grunt); // Define the configuration for all the tasks grunt.initConfig({ // Project settings yeoman: { // configurable paths app: require('./bower.json').appPath || 'app',dist: 'dist' },less: { development: { options: { compress: true,yuicompress: true,optimization: 2 },files: { // target.css file: source.less file "app/styles/bootstrap.css": "app/styles/less/bootstrap.less" } } },// Watches files for changes and runs tasks based on the changed files watch: { bower: { files: ['bower.json'],'<%= yeoman.app %>/styles/less/{,*/}*.less'],'autoprefixer','less'] },// The actual grunt server settings connect: { options: { port: 9000,// Change this to '0.0.0.0' to access the server from outside. hostname: 'localhost',livereload: 35729 },livereload: { options: { open: true,base: [ '.tmp','<%= yeoman.app %>' ] } },test: { options: { port: 9001,'test',dist: { options: { base: '<%= yeoman.dist %>' } } },// Make sure code styles are up to par and there are no obvious mistakes jshint: { options: { jshintrc: '.jshintrc',reporter: require('jshint-stylish') },all: [ 'Gruntfile.js','<%= yeoman.app %>/scripts/{,*/}*.js' ],test: { options: { jshintrc: 'test/.jshintrc' },src: ['test/spec/{,*/}*.js'] } },// Empties folders to start fresh clean: { dist: { files: [{ dot: true,src: [ '.tmp','<%= yeoman.dist %>/*','!<%= yeoman.dist %>/.git*' ] }] },server: '.tmp' },// Add vendor prefixed styles autoprefixer: { options: { browsers: ['last 1 version'] },dist: { files: [{ expand: true,cwd: '.tmp/styles/',src: '{,dest: '.tmp/styles/' }] } },// Automatically inject Bower components into the app bowerInstall: { app: { src: ['<%= yeoman.app %>/index.html'],ignorePath: '<%= yeoman.app %>/' } },// Renames files for browser caching purposes rev: { dist: { files: { src: [ '<%= yeoman.dist %>/scripts/{,*/}*.js','<%= yeoman.dist %>/styles/{,'<%= yeoman.dist %>/images/{,svg}','<%= yeoman.dist %>/styles/fonts/*' ] } } },// Reads HTML for usemin blocks to enable smart builds that automatically // concat,minify and revision files. Creates configurations in memory so // additional tasks can operate on them useminPrepare: { html: '<%= yeoman.app %>/index.html',options: { dest: '<%= yeoman.dist %>',flow: { html: { steps: { js: ['concat','uglifyjs'],css: ['cssmin'] },post: {} } } } },// Performs rewrites based on rev and the useminPrepare configuration usemin: { html: ['<%= yeoman.dist %>/{,*/}*.html'],css: ['<%= yeoman.dist %>/styles/{,options: { assetsDirs: ['<%= yeoman.dist %>'] } },// The following *-min tasks produce minified files in the dist folder cssmin: { options: { root: '<%= yeoman.app %>' } },imagemin: { dist: { files: [{ expand: true,cwd: '<%= yeoman.app %>/images',gif}',dest: '<%= yeoman.dist %>/images' }] } },svgmin: { dist: { files: [{ expand: true,*/}*.svg',htmlmin: { dist: { options: { collapseWhitespace: true,collapseBooleanAttributes: true,removeCommentsFromCDATA: true,removeOptionalTags: true },files: [{ expand: true,cwd: '<%= yeoman.dist %>',src: ['*.html','views/{,dest: '<%= yeoman.dist %>' }] } },// ngmin tries to make the code safe for minification automatically by // using the Angular long form for dependency injection. It doesn't work on // things like resolve or inject so those have to be done manually. ngmin: { dist: { files: [{ expand: true,cwd: '.tmp/concat/scripts',src: '*.js',dest: '.tmp/concat/scripts' }] } },// Replace Google CDN references cdnify: { dist: { html: ['<%= yeoman.dist %>/*.html'] } },// Copies remaining files to places other tasks can use copy: { dist: { files: [{ expand: true,dot: true,cwd: '<%= yeoman.app %>',dest: '<%= yeoman.dist %>',src: [ '*.{ico,png,txt}','.htaccess','*.html','images/{,*/}*.{webp}','fonts/*' ] },{ expand: true,cwd: '.tmp/images',dest: '<%= yeoman.dist %>/images',src: ['generated/*'] }] },styles: { expand: true,cwd: '<%= yeoman.app %>/styles',dest: '.tmp/styles/',*/}*.css' } },// Run some tasks in parallel to speed up the build process concurrent: { server: [ 'copy:styles' ],test: [ 'copy:styles' ],dist: [ 'copy:styles','imagemin','svgmin' ] },// By default,your `index.html`'s <!-- Usemin block --> will take care of // minification. These next options are pre-configured if you do not wish // to use the Usemin blocks. // cssmin: { // dist: { // files: { // '<%= yeoman.dist %>/styles/main.css': [ // '.tmp/styles/{,// '<%= yeoman.app %>/styles/{,*/}*.css' // ] // } // } // },// uglify: { // dist: { // files: { // '<%= yeoman.dist %>/scripts/scripts.js': [ // '<%= yeoman.dist %>/scripts/scripts.js' // ] // } // } // },// concat: { // dist: {} // },// Test settings karma: { unit: { configFile: 'karma.conf.js',singleRun: true } } }); grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('serve',function (target) { if (target === 'dist') { return grunt.task.run(['build','connect:dist:keepalive']); } grunt.task.run([ 'clean:server','bowerInstall','concurrent:server','connect:livereload','watch' ]); }); grunt.registerTask('server',function (target) { grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); grunt.task.run(['serve:' + target]); }); grunt.registerTask('test',[ 'clean:server','concurrent:test','connect:test','karma' ]); grunt.registerTask('build',[ 'clean:dist','useminPrepare','concurrent:dist','concat','ngmin','copy:dist','cdnify','cssmin','uglify','rev','usemin','htmlmin' ]); grunt.registerTask('default',[ 'newer:jshint','build' ]); }; 如你所见,这在我的styles文件夹中创建了一个新的bootstrap.css,然后我从我的index.html链接:) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |